顏色是否可以在 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>

懸停顏色設置為紅色，您可以更新它。