Question

我想要实现的是悬停按钮 - 背景变为白色，文字变为透明，请记住，我的情况下身体充满了一些图像，运行我的片段。换句话说，我想在按钮背景中打出一个洞，其中包含给定文字和透明度的形状

button {
  padding:10px;
  border:solid 5px #fff;
  color: #fff;
  background: none;
  font-weight: bold;
  font-size:2em;
}

button:hover {
  color: transparent;
  background: #fff;
}


body {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1280px-Mallard2.jpg");
  background-size: 200px;
  background-repeat: no-repeat;
}

<button>BUTTON</button>

Answer 1

将mix-blend-mode设置为强光时，灰色变为透明。

（IE或Edge不支持）

你可以这样使用它：

button {
  padding:10px;
  border:solid 5px #fff;
  color: #fff;
  background: none;
  font-weight: bold;
  font-size:2em;
}

button:hover {
  color: gray;
  background-color: white;
  mix-blend-mode: hard-light;  
}


body {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1280px-Mallard2.jpg");
  background-size: 200px;
  background-repeat: no-repeat;
}

<button>BUTTON</button>

Answer 2

您可以使用CSS属性background-clip: text; 可以在此处找到完整的教程：https://css-tricks.com/how-to-do-knockout-text/

是否可以在彩色背景容器中的所有图层上获得透明文本？

2 个答案: