Возможно ли разрезать отверстие в форме в слое?

У меня анимированный фон, и мне очень хотелось бы, чтобы текст моего текста был вырезан и отображал фон.Возможно ли разрезать отверстие в форме в слое?

Я видел пример, в котором вы можете прикрепить фоновое изображение и установить цвет фона на один и тот же слой, а затем показать изображение в тексте, но не какие-либо примеры, где был обнаружен слой внизу. Является ли это возможным?

Таким образом, в этом фрагменте будет вырезан белый текст, и вы увидите, как градиент меняется через отверстие.

body { 
 
    background: linear-gradient(270deg, #000, #fff); 
 
    background-size: 400% 400%; 
 
    -webkit-animation: AnimationName 5s ease infinite; 
 
    -moz-animation: AnimationName 5s ease infinite; 
 
    animation: AnimationName 5s ease infinite; 
 
} 
 
@-webkit-keyframes AnimationName { 
 
    0% { 
 
    background-position: 0% 50%; 
 
    } 
 
    50% { 
 
    background-position: 100% 50%; 
 
    } 
 
    100% { 
 
    background-position: 0% 50%; 
 
    } 
 
} 
 
@-moz-keyframes AnimationName { 
 
    0% { 
 
    background-position: 0% 50%; 
 
    } 
 
    50% { 
 
    background-position: 100% 50%; 
 
    } 
 
    100% { 
 
    background-position: 0% 50%; 
 
    } 
 
} 
 
@keyframes AnimationName { 
 
    0% { 
 
    background-position: 0% 50%; 
 
    } 
 
    50% { 
 
    background-position: 100% 50%; 
 
    } 
 
    100% { 
 
    background-position: 0% 50%; 
 
    } 
 
} 
 

 
.container{ 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: darkred; 
 
    margin: auto; 
 
    color: #fff; 
 
    font-size: 80px; 
 
    font-weight: 900; 
 
    text-align: center; 
 
}

<div class="container">TO BE CUT OUT</div>

jsfiddle: https://jsfiddle.net/nmhmxkyj/

источник

2016-02-11 Guerrilla

Это пример, который я упомянул. Он работает с изображением, прикрепленным к тому же слою, он не показывает слой позади, насколько я могу видеть. – Guerrilla

На самом деле второе решение похоже, что оно будет работать, я только прочитал принятый ответ. Ты был прав. – Guerrilla

Наряду с ответом SVG по связанному вопросу вы также можете написать текст на 'холсте' и установить' globalCompositeOperation' в 'destination-out', и он вырезает перекрывающиеся фигуры. [fiddle demo] (https://jsfiddle.net/7wLkrmku/) –

Мой предыдущий ответ был единственный способ, которым я мог бы найти, чтобы завершить это в чистом CSS. Однако это возможно с помощью javascript и холста. Это удовлетворит ваш вопрос?

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
ctx.save(); 
 
ctx.beginPath(); 
 
ctx.fillStyle = "darkred"; 
 
ctx.rect(0, 0, canvas.width, canvas.height); 
 
ctx.fill(); 
 
ctx.font = "70pt Arial"; 
 
ctx.globalCompositeOperation = "xor"; 
 
ctx.beginPath(); 
 
ctx.fillText("To Be", 60, 80); 
 
ctx.fillText("Cut Out", 35, 180); 
 
ctx.fill(); 
 
ctx.restore();

body { 
 
    background: linear-gradient(270deg, #000, #fff); 
 
    background-size: 400% 400%; 
 
    -webkit-animation: AnimationName 5s ease infinite; 
 
    -moz-animation: AnimationName 5s ease infinite; 
 
    animation: AnimationName 5s ease infinite; 
 
} 
 
@-webkit-keyframes AnimationName { 
 
    0% { 
 
    background-position: 0% 50%; 
 
    } 
 
    50% { 
 
    background-position: 100% 50%; 
 
    } 
 
    100% { 
 
    background-position: 0% 50%; 
 
    } 
 
} 
 
@-moz-keyframes AnimationName { 
 
    0% { 
 
    background-position: 0% 50%; 
 
    } 
 
    50% { 
 
    background-position: 100% 50%; 
 
    } 
 
    100% { 
 
    background-position: 0% 50%; 
 
    } 
 
} 
 
@keyframes AnimationName { 
 
    0% { 
 
    background-position: 0% 50%; 
 
    } 
 
    50% { 
 
    background-position: 100% 50%; 
 
    } 
 
    100% { 
 
    background-position: 0% 50%; 
 
    } 
 
}

<canvas id="canvas" width="400px" height="200px"></canvas>

JSFiddle: https://jsfiddle.net/p98waufL/

источник

2016-02-11 16:25:06

Это не показывает слой под ним. Он вырезается из одного слоя, поэтому вы не сможете увидеть фоновая анимация в моем примере – Guerrilla

@Guerrilla Я не думаю, что это возможно, как вы этого хотите. Не могли бы вы просто создать простой фон gif и использовать этот метод? Кажется, ваш фон изменится меньше, чем текст. –

@Guerrilla вы были бы против использования полотенец? –

Вы можете использовать SVG и применять <mask>

@import url(https://fonts.googleapis.com/css?family=Lato:900); 
 
body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background: url('http://science-all.com/images/mountain/mountain-03.jpg'); 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-45%, -50%); 
 
} 
 

 
text { 
 
    font-size: 80px; 
 
    text-anchor: middle; 
 
    font-family: 'Lato', sans-serif; 
 
}

<svg width="450px" height="250px"> 
 
    <mask id="mask" height="100%" width="100%"> 
 
    <rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect> 
 
    <text> 
 
     <tspan x="45%" dy="1.2em">TO BE</tspan> 
 
     <tspan x="45%" dy="1.1em">CUT OUT</tspan> 
 
    </text> 
 
    </mask> 
 

 
    <rect width="100%" height="100%" mask="url(#mask)" fill="#8B0000"></rect> 
 
</svg>

источник

2016-02-11 16:52:55

Возможно ли разрезать отверстие в форме в слое?

ответ

Смежные вопросы