我有一个内联 SVG 图像用作背景,简化的示例如下:
div {
width: 100%; height: 500px;
color: green;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><path d='M0 0 H 100 V 100 H 0 Z' fill='currentColor'></path></svg>");
}
https://jsfiddle.net/wjqkL07p/3/ https://jsfiddle.net/wjqkL07p/3/
问题是图像没有继承 currentColor 并且当我期望它是绿色时它是黑色的。任何想法?
这并不像您期望的那样工作,因为使用url()
使 SVG 被视为外部资源,即使情况并非如此。所以没办法使用CSS'currentColor
当它是背景图像时在 SVG 中。
对于这种特定情况,您可以使用面罩并使用background-color
更新颜色。确保使用不透明的颜色填充 SVG。
div {
height: 300px;
background-color: green;
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><path d='M0 0 H 80 V 100 H 0 Z' fill='black'></path></svg>");
}
<div></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)