如何使用 css 使用文本效果删除图像？ [复制]

Question

有人可以帮我实现这样的效果吗？背景图像需要使用如下图所示的文本删除。用css

Answer 1

您可以将background-clip 与-webkit-text-fill-color: transparent 与伪元素一起使用。

放置一个带有背景图片和相对位置的元素。然后在该元素内放置一个元素并覆盖其父元素的宽度 100% 的高度的 50vw，然后将其绝对定位并放置左侧或右侧和顶部@0。然后您可以根据需要设置样式文本。将 background-clip 设置为文本，background-clip: text; 并设置 -webkit-text-fill-color: transparent，设置 background-size 以覆盖父元素和剪辑元素。

现在设置一个伪元素来放置黑色背景。 .clip-area::before 将背景设置为黑色，宽度设置为 50%，高度设置为 100%，左侧或右侧和顶部设置为 0，z-index 设置为 -1。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#bg {
  width: 100vw;
  height: 100vw;
  background: url(https://d2jx2rerrg6sh3.cloudfront.net/image-handler/ts/20200123101248/ri/673/picture/2020/1/shutterstock_603198743.jpg) no-repeat;
  position: relative;
  z-index: 1;
  background-size: cover;
}

.clip-area {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 50vw;
  height: 100%;
  line-height: 3.5rem;
  font-size:  clamp(2rem, 3.5vw, 5rem);
  text-align: center;
  text-transform: uppercase;
  font-family: 'Open Sans Pro', sans-serif;
  font-weight: bold;
  background: url(https://d2jx2rerrg6sh3.cloudfront.net/image-handler/ts/20200123101248/ri/673/picture/2020/1/shutterstock_603198743.jpg);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.clip-area::before {
  content: '';
  background: black;
  width: 50vw;
  height: calc(100% - 6px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  margin: 3px;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

<div id="bg">
  <div class="clip-area">
    You can use text clipping to show the background below
  </div>
</div>