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

Question

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

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 设置为 hard-light 时，灰色变为透明。

(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>