颜色是否可以在 CSS 中“擦除”背景？

Question

我真的怀疑我问的是可能的，但它仍然值得一试。

我正在尝试创建一个通常具有background-color: transparent; color: white;的按钮background-color: transparent; color: white; background-color: transparent; color: white; 当你将鼠标悬停在它上面时，这些属性应该交换。 问题是，如果您只是交换它们，那么您看到的只是一个白色按钮。 如果您知道包含元素的背景颜色，那么您可以从那里获取颜色，但是如果按钮位于图像或画布上，那么这将不起作用。

到目前为止我就是这样做的

 html, body { height: 100%; } #container { background-color: #38404D; height: 100%; } .ghost-button { background-color: transparent; border: 1px solid #ffffff; outline: none !important; transition: all 0.8s; margin: 10px 10px; padding: 6px 7px; cursor: pointer; color: #ffffff; } .ghost-button:hover { background-color: #ffffff; color: #38404D; } .ghost-button:active { box-shadow: inset 0 0 8px 0px #888888; }

 <div id="container"> <button class="ghost-button">Hover Here</button> </div>

更新

似乎不少人都被这个问题搞糊涂了。 我在问是否有一种方法可以做我在上面所做的完全相同的事情，但是在图像或画布（而不是纯色）之上。 请参阅下面的示例

 html, body { height: 100%; } #container { background-image: url("http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg"); height: 100%; } .ghost-button { background-color: transparent; border: 1px solid #ffffff; outline: none !important; transition: all 0.8s; margin: 10px 10px; padding: 6px 7px; cursor: pointer; color: #ffffff; } .ghost-button:hover { background-color: #ffffff; color: #38404D; } .ghost-button:active { box-shadow: inset 0 0 8px 0px #888888; }

 <div id="container"> <button class="ghost-button">Hover Here</button> </div>

Answer 1

是的，它与CSS可能mix-blend-mode 。

Answer 在 2021 年 4 月的更新：尽管 Safari 没有hue 、 saturation 、 color和luminosity混合模式，但目前它有非常可靠的支持（全球 95%）。 当然，如果您希望使用 IE（就像过去几年的许多其他很酷的 CSS 功能一样），IE 并不是一件大事。

 .ghost-button { /* Important part */ mix-blend-mode: screen; background: #000; color: #fff; /* Button cosmetics */ border: .125em solid #fff; font: 2em/1 Cursive; letter-spacing: 1px; outline: none !important; transition: all .8s; padding: .5em 1em; cursor: pointer; } .ghost-button:hover { /* Important part */ background: #fff; color: #000; } #container { background: url('http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg') center/cover; /* Also works with background-color or gradients: */ /* background: linear-gradient(to right, red, yellow); */ /* Container positioning */ display: flex; justify-content: center; align-items: center; height: 100vh; } html, body { margin: 0; }

 <div id="container"> <button class="ghost-button">Hover Here</button> </div>

正如你所看到的，这里的秘密是使用mix-blend-mode: screen与“擦除”部分的black一起使用，因为在使用此screen模式时黑色与背景混合。

Answer 2

不，这在 CSS 中是不可能的！ 您可以尝试使用 JS 设置color来模仿这种效果。

Answer 3

 body { height: 100%; } #container { background-color: #38404D; height: 100%; } .ghost-button { background-color: transparent; border: 1px solid #ffffff; outline: none !important; transition: all 0.8s; margin: 10px 10px; padding: 6px 7px; cursor: pointer; color: #ffffff; } .ghost-button:hover { background-color: none; color: red; } .ghost-button:active { box-shadow: inset 0 0 8px 0px #888888; }

 <div id="container"> <button class="ghost-button">Hover Here</button> </div>

悬停颜色设置为红色，您可以更新它。