Question

是否可以将Alpha蒙版应用于元素（在本示例中为<div>），以便在存在另一个元素（<span>）的地方将其剪切？我希望背景图片在<span>文字周围的矩形中可见。

Answer 1

Codepen

可能，但是需要间接解决方案。通过使用clip-path属性，我们可以将#target显示为框架，然后将<h1>居中，但这需要进行一些更改。

首先-我们需要将<h1>的<{>}兄弟姐妹不再是孩子。

#target

第二-将<body> <div id=target></div> <h1 id="clipper">CLIP HERE</h1> </body>属性添加到clip-path。您可以使用一些值来使它看起来更好，甚至可以使用#frame之类的无响应单元。 Here是Bennett feely的一个非常好的在线编辑器的链接。

px

body {
  margin: 0;
  background-image: url('https://picsum.photos/400/200');
}

#target {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: gray;
  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}

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

使用DOM元素作为遮罩

1 个答案:

Codepen