我有一個網站，其中有影像在背景中移動，我希望導航字體根據影像顏色進行更改..
要明白我的意思，只需查看本網站導航中的“ ” https://www.atomomanagement.com/
根據影像，它要么是白色的，要么是黑色的。我也想做同樣的事情，但我沒有運氣。我嘗試使用 mix-blend-mode: difference 但它不起作用
任何人都可以幫忙嗎？
親切的問候
uj5u.com熱心網友回復：
我覺得我應該發布一個答案來解釋 OP 示例的情況。
簡單地fill: white在 SVG 上設定 a并不能完全再現所需的結果。OP 的示例還需要一個帶有mix-blend-mode: differenceset的父 div 。
您實際上可以在沒有任何 SVG 的情況下重現它。您只需要一個顏色/填充為白色的元素，以及一個帶有mix-blend-mode: difference. 這與差異的混合模式如何與背景上的白色一起作業有關。
function _Swap() {
document.querySelector(".backgroundDiv").style.background = (document.querySelector(".backgroundDiv").style.background == "rgb(0, 0, 0)") ? "rgb(255, 255, 255)" : "rgb(0, 0, 0)";
}.backgroundDiv {
background: #FFF;
padding: 4em;
}
.test {
mix-blend-mode: difference;
}
p {
color: #FFF;
}<div class="backgroundDiv">
<div class="test">
<p>This is a test</p>
</div>
</div>
<input type="button" value="Swap Background Color" onclick="_Swap()">uj5u.com熱心網友回復：
它沒有改變。中的path元素svg具有此css屬性：
fill: white;
它導致了你所看到的。您可以在 devTools 中打開它并洗掉該屬性，然后您可以看到更改。實作您想要的制作 svg 并添加fill: white;到路徑元素。
更新：
我剛剛發現了這個被賦予nav標簽的css屬性：
mix-blend-mode: difference;
它將根據 bg 恢復標簽中元素的整個顏色。
essxtee 的答案是在我更新之前。所以功勞是他的:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408405.html
標籤：
上一篇：影像html上的回應式文本
下一篇：更流暢的CSS影片