有可能在彩色背景容器中的所有图层上获得透明文本？ [英] Is possible to get transparent text over all layers in colored background container?

问题描述

我想存档的是按钮悬停 - 背景变成白色，文字变成透明，请记住，身体充满了一些图像我的情况，运行我的片段。
换句话说，我想在按钮背景中创建具有给定文本和透明度的形状的洞

  button {padding：10px; border：solid 5px #fff;颜色：#fff;背景：无; font-weight：bold; font-size：2em;} button：hover {color：transparent;背景：#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>

解决方案

（IE或Edge不支持） b

您可以这样使用它：

按钮{padding：10px; border：solid 5px #fff;颜色：#fff;背景：无; font-weight：bold; font-size：2em;} button：hover {color：gray;背景颜色：白色;混合混合模式：强光; } 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>

What i want to achive is button on hover - background turn to white, text turn to transparent, keep in mind that body is filled with some image i my case, run my snippet. In other words i want make a hole in button background with shape of given text and transparency

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>

解决方案

When you set mix-blend-mode to hard-light, gray becomes transparent.

(Not supported by IE or Edge)

You can use it this way:

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>

这篇关于有可能在彩色背景容器中的所有图层上获得透明文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！