时间戳

首页 > 解决方案 > 使用 DOM 元素作为掩码

html - 使用 DOM 元素作为掩码

问题描述

小提琴演示问题：https ://jsfiddle.net/0z6ybe5p/

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

标签： htmlcssmask

解决方案

密码笔

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

首先- 我们需要让不再是孩子<h1>的兄弟姐妹。#target

<body>
  <div id=target></div>
  <h1 id="clipper">CLIP HERE</h1>
</body>

第二- 将clip-path属性添加到#frame. 您可以对这些值进行一些调整以使其看起来更好看，甚至可以使用无响应的单位，例如px. 这是 Bennett feely 的一个非常好的在线编辑器的链接。

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%);
}
<body>
  <div id=target></div>
  <h1 id="clipper">CLIP HERE</h1>
</body>

推荐阅读