在我的html中，我有透明的svg圓圈。我需要在這個svg圓圈上反轉顏色，所以我將看到黑色的圓圈和青色的文字。
我試著用過濾器invert(1)將.cursor__inner的填充設定為透明（正如你在代碼片段中看到的那樣），但它沒有起作用。
span class="hljs-selector-class">.cursor {
position: absolute;
top: 0;
left: 0;
}
.cursor__inner {
填充：透明。
filter: invert（1）。
}
p {
color: red;
}< svg class="cursor"/span> width="64" height="64" viewBox="0 0 64 64">
< circle class="cursor__inner" cx="32" cy="32" r="32" />
</svg>
<p>Hello World! </p>我想做出這樣的效果：
我更喜歡用純css的解決方案。
uj5u.com熱心網友回復：
實作所需結果的一種方法與問題中給出的代碼接近。
p元素中文本的顏色被顛倒了，所以位于圓圈上方的部分是青色的。包含 p 和 svg 的元素的背景（在此片段中為正文）設定了白色背景，因此文本上的混合混合模式采用了顏色（現在為 #00ffff = 青色）和白色（#ffffff）的差異，使我們回到了紅色（#ff0000）。
正如評論中所指出的，由于SVG圓圈具有透明度，所以不可能將它的RGB顏色反轉，因此它將被填充為純色。
。span class="hljs-selector-tag">body {
background: white;
height: 100vh;
}
.cursor {
position: absolute;
top: 0;
left: 0;
}
.cursor__inner {
填充：黑色。
}
p {
color: cyan;
color: red;
filter: invert（1）。
mix-blend-mode: difference;
}<body>
< svg class="cursor"/span> width="64" height="64" viewBox="0 0 64 64">
< circle class="cursor__inner" cx="32" cy="32" r="32" />
</svg>
<p>世界你好！</p>/span>
</body>/span>uj5u.com熱心網友回復：
像這樣嗎？透明的倒置是透明的，所以我把填充設為白色。而過濾器：倒置使用%。
filter: invert(1) <- Wrong
filter: invert(100%) <- Right
span class="hljs-selector-class">.cursor {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.cursor__inner {
填充：白色。
z-index: -1;
}
p {
color: red;
z-index: 100;
}
.invert {
filter: invert（100%）。
}< svg class="cursor invert" width="64""64" height="64" viewBox="0 0 64 64">
< circle class="cursor__inner" cx="32" cy="32" r="32" />
</svg>
<p class="invert">/span>Hello World! </p>/span>uj5u.com熱心網友回復：
試著按照這個來做。
span class="hljs-selector-class">.cursor {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.cursor__inner {
填充：白色。
filter: invert（100%）。
}
p {
color: 紅色。
filter: invert（100%）。
}< svg class="cursor"/span> width="64" height="64" viewBox="0 0 64 64">
< circle class="cursor__inner" cx="32" cy="32" r="32" />
</svg>
<p>Hello World! </p>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/321630.html
標籤：