如何反转HTML元素的背景图像中的颜色？

概述我有以下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-fi 我有以下div：

<div ></div>

现在,我需要反转背景图像的颜色,使其看起来像：

我试过用

filter：invert(100％);
-webkit-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>

总结

以上是内存溢出为你收集整理的如何反转HTML元素的背景图像中的颜色？全部内容，希望文章能够帮你解决如何反转HTML元素的背景图像中的颜色？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。