Question

我有一个动画背景，我真的希望我的文字的效果被剪掉并显示背景。

我见过一个示例，您可以在其中附加背景图像并将背景颜色设置为同一图层，然后在文本中显示图像，但不显示下面的图层显示的任何示例。有可能吗？

因此，在这个片段中，白色文字会被切掉，你可以看到渐变在洞中。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

Answer 1

您可以使用 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>

Answer 2

我之前的回答是我在纯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/

是否可以在图层中切割文字形状的孔？

2 个答案: