如何反转HTML元素的背景图像中的颜色?
发布时间:2020-12-14 16:45:26 所属栏目:资源 来源:网络整理
导读:我有以下div: div style="border-radius:50%; height:233px; width:423px; background-color:black; background-image:url(image2.gif);background-repeat:repeat; border:solid 1px; filter: invert(100%);-webkit-filter: invert(100%);"/div 现在,我需要
我有以下div:
<div style="border-radius:50%; height:233px; width:423px; background-color:black; background-image:url(image2.gif);background-repeat:repeat; border:solid 1px; filter: invert(100%);-webkit-filter: invert(100%);"></div> 现在,我需要反转背景图像的颜色,使其看起来像: 我试过用 filter:invert(100%); 但它反转整个div,包括边界使它看起来像: 如何仅反转背景图像的颜色而不是整个元素的颜色? 注意:上面的div是以编程方式生成的.反转边框颜色的解决方案也需要我改变程序以反转边框的颜色,这可能是任何格式(十六进制,rgb,rgba,hsl,hsla,单词等),基本上膨胀我的码.但是,如果我没有其他选择,那么我会这样做,但首先我希望我能找到一个更简单的解决方案. 解决方法
您可以在伪元素中设置背景,并将边框保留在div中.
这样过滤器不会影响主元素 div { border-radius:50%; height:233px; width:423px; border:solid 1px green; overflow: hidden; position: relative; } div:after { content: ""; position: absolute; width: 100%; height: 100%; background-color:black; background-image:url(http://i.stack.imgur.com/xQi3T.png); background-position: -21px -35px; background-repeat:repeat; filter: invert(100%); -webkit-filter: invert(100%); } <div></div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |