logo标签列表

通过CSS改变PNG图像的颜色？

htmlcssimagepngoverlay
708

如果有一个显示简单图形的透明PNG图片，是否可以通过CSS改变它的颜色？可以使用某种叠加方式或其他方法来实现吗？

9
您可以设置background-color CSS属性。您可以创建一个不透明的部分，它将是固定的，以及一张图片的透明部分，这个透明部分可以通过CSS填充任何您喜欢的颜色。这符合您想要实现的吗？ - jakub.g
2
@qbk，这值得回答，不仅仅是评论。而且你技术上比我快1秒。 - Unknown artist
2
您可以使用混合模式的伪元素来重新着色任何纯黑或纯白（背景保持透明）的图标。请参见我的答案：stackoverflow.com/a/39796437/1472114 - chrscblls
2
对于那些寻找实际、最新答案的人，而不涉及那些可怕的“过滤器”，这些过滤器完全不适用于此，可以参考以下链接：https://dev59.com/p2s05IYBdhLWcg3wJurp#32736304 你可以跳过其余部分：不用谢。 - gd1
30个回答
3
对于实心图像，您可以使用网站。只需将颜色粘贴并复制过滤器，然后将其粘贴到CSS中的图像类中，图像的颜色就会相应地改变。在这种情况下，图像是红色的，通过过滤器变为黄色。对于SVG图像非常有用。 

img{
  filter: brightness(0) saturate(100%) invert(70%) sepia(97%) saturate(925%) hue-rotate(353deg)     brightness(102%) contrast(102%);
  width: 400px;
}
<div>
  <img class=my_img" src="https://images.twinkl.co.uk/tr/image/upload/t_illustration/illustation/particle-arrangement-in-a-solid.png">
</div>

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
2
要真正改变颜色，您可以使用CSS过渡和-webkit-filter，其中当发生某些事情时，您将调用所选的-webkit-filter。例如：
img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }
2
您可以使用filter: hue-rotate(Ndeg)，但如果图像是黑白的，色相永远不会改变。
然而，您可以将它与filter: sepia(100)结合使用。这将为hue-rotate过滤器可以更改的图像添加颜色。
Sepia添加的颜色相当减淡，因此加强一下filter：saturate(50);。这使得它成为一个更深的颜色，更好地适用于hue-rotate。
然后将它们全部组合在一起：filter: sepia(100) saturate(50) hue-rotate(280deg) 然后尝试旋转度数，直到找到您喜欢的颜色。
2

反答案：黑色形状

这是对Vasan答案的改进，针对带有黑色形状的PNG - 使用svg <image>标签并定义filter（svg过滤器比css过滤器更强大）

<svg>
  <defs>
    <filter id="colorMask">
      <feFlood flood-color="#ff0000" result="flood" />
      <feColorMatrix result="inv" in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" />
      <feComposite in="inv" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  
  <image filter="url(#colorMask)" xlink:href="pic.png" />

</svg>


<svg width=37px height=36px>
  <defs>
    <filter id="colorMask">
      <feFlood flood-color="#ff0000" result="flood" />
      <feColorMatrix result="inv" in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" />
      <feComposite in="inv" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  
  <image filter="url(#colorMask)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAkBAMAAAD87O6VAAAACXBIWXMAAAsSAAALEgHS3X78AAAALVBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMHXDdAAAAD3RSTlPAAIBAMNAgsOBQYKAQkHD2u9I6AAAAh0lEQVQoz2OwYEAHBQxGguiAYaDFrAMY2heiiiUUCwqKqU5EFhNpBpEyvMhiHo5gnrQiklgI1PhghJiUIlTMASEmehAqJu4IF0uHOQ2sASIGd7cYI1xME+4H/GLY9GKzA5tbsLkZ5jeZECxh8BA5rDrBtjKhhiknRpiCwz584SBJByhiWNIuAFBkOlCFUBO4AAAAAElFTkSuQmCC" />
  
</svg>

<!-- Original image (for comparision) -->

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAkBAMAAAD87O6VAAAACXBIWXMAAAsSAAALEgHS3X78AAAALVBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMHXDdAAAAD3RSTlPAAIBAMNAgsOBQYKAQkHD2u9I6AAAAh0lEQVQoz2OwYEAHBQxGguiAYaDFrAMY2heiiiUUCwqKqU5EFhNpBpEyvMhiHo5gnrQiklgI1PhghJiUIlTMASEmehAqJu4IF0uHOQ2sASIGd7cYI1xME+4H/GLY9GKzA5tbsLkZ5jeZECxh8BA5rDrBtjKhhiknRpiCwz584SBJByhiWNIuAFBkOlCFUBO4AAAAAElFTkSuQmCC">

1

这是我使用的一种方法，而且完美地运作：

.RedImage {
  filter:
    brightness(1000%) grayscale(100%) /* To change the image color to the white */
    opacity(0.1) /* To apply the color all over the image */
    drop-shadow(0 0 0 red) /* To apply my costum color */
    drop-shadow(0 0 0 red) /* To apply my costum color more stronger */
    drop-shadow(0 0 0 red)
    drop-shadow(0 0 0 red)
    drop-shadow(0 0 0 red);
}
<img class="RedImage" height="50px" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png" />

享受...

太好了！谢谢。 - Dr. Goulu
工作，但是应用多个堆叠的阴影似乎会降低图像的清晰度。此外，我无法使用这种方法使图像变为100%白色。 - Jules Colle
0
  1. 如果图像很简单，比如矢量图像，你可以将其转换为SVG格式，并在其中进行CSS更改。
  2. 另一种选择是将图像转换为PNG格式，并将特定颜色更改为透明（例如剪贴），然后使用CSS更改背景颜色。
0

.image-container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background-color: blue; /* Change this to the desired color */
  mix-blend-mode: multiply; /* Optional: Blend mode to mix the colors */
}
img {
    width:20%;
    float:left; 
     margin:0;
}
<div class="image-container">
  <img  src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="Your Image">
  <div class="overlay"></div>
</div>

0
你可以稍微修改你的HTML，然后使用-webkit-mask-image。
不要直接写成<img src="my-image.png">，而是像这样包裹起来：
<span class="masked" style="-webkit-mask-image: url('my-image.png');">
  <img src="my-image.png"/>
</span>

然后，如果您想将其颜色设置为#ff0000，请添加以下CSS代码：
.masked {
  display: inline-block;
  background-color: #ff0000;
  -webkit-mask-size: 95%; /* edges might get cut off if you use 100% */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.masked > img {
  opacity: 0;
  display:block;
}

完全可工作的示例： 

.masked {
  display: inline-block;
  background-color: red;
  -webkit-mask-size: 95%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}


.masked > img {
  opacity: 0;
  width: auto;
  display:block;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" />
<span class="masked" style="-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359');"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" /></span>
<span class="masked" style="-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359'); background-color: blue;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" /></span>
<span class="masked" style="-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359'); background-color: orange;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" /></span>

更多例子：https://codepen.io/pwkip/pen/BaGMRjK
0
编辑：我对我的解决方案感到困惑了...你根本不需要改变图片。只需使用你想要的 PNG 图片，然后创建一个带有所需尺寸的空白图像标签即可。
<img class="image" width="x" height="y"/>

然后在CSS中你可以这样做
.image {
    background-color: rgba(); <--color you wanted the png to be
    -webkit-mask-image: url(/image.png);
    mask-image: url(/image.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
}

这样你就可以随意改变背景颜色，任何你想要的颜色都可以，但它将以空白/白色PNG的形状呈现。结果示例
0

目前可以使用CSS中的遮罩来实现这一点。 这个想法很简单，只需创建一个完全填充了纯色的div，使用'background-color'。 然后我们在上面放置一个与姐妹图像大小完全相同的遮罩。这就是为什么需要使用'fit-content'。

还建议您查看浏览器对'fit-content'、'mask-image'和'mask-size'的支持情况，因为它们在旧版本的浏览器中不起作用。

HTML：

<div class="img-color-fill">
  <div></div>
  <img src="image.png|svg">
</div>

CSS（层叠样式表）：
.img-color-fill {
  position: relative;
  width: fit-content;
  height: fit-content;
  line-height: 0;
}
.img-color-fill div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url("image.png"); /* works with svg too */
  mask-image: url("image.png"); /* works with svg too */
}
.img-color-fill img {
  width: 256px;
  height: auto;
  opacity: 0;
}

例子：

.img-color-fill {
  position: relative;
  width: fit-content;
  height: fit-content;
  line-height: 0;
}
.img-color-fill div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MSI+Cgk8cGF0aCBmaWxsPSIjMjIyNDI2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im02MyAzNi43YzAgMy41LTMuMiA1LjYtNy42IDUuNi0yLjcgMC4yLTUuNC0wLjctNy41LTIuNmwxLjgtMS44YzEuNSAxLjUgMy42IDIuMyA1LjcgMi4yIDMuMSAwIDUtMS4xIDUtMy4zIDAtMS43LTAuOC0yLjYtMy0yLjhsLTMuMS0wLjJjLTMuNS0wLjMtNS40LTItNS40LTUgMC0zLjMgMi43LTUuNCA2LjctNS40cTAuOSAwIDEuNyAwLjEgMC45IDAuMSAxLjcgMC4zIDAuOSAwLjMgMS43IDAuNyAwLjcgMC4zIDEuNSAwLjlsLTEuOCAxLjhjLTEuNC0xLjEtMy4yLTEuNy01LTEuNi0yLjcgMC00LjEgMS4xLTQuMSAzLjEgMCAxLjYgMC45IDIuNiAzLjIgMi43bDMgMC4zYzMuMyAwLjMgNS41IDEuNCA1LjUgNXptMjMuNy03LjJ2MTIuNWgtMi44di0xLjhjLTEuNCAxLjQtMy40IDIuMS01LjMgMi0yLjYgMC00LjEtMC40LTUuMi0xLjctMS0wLjktMS40LTIuMy0xLjQtMy43IDAtMy4zIDIuMi01LjQgNi4zLTUuNGg1LjV2LTEuOGMwLTIuNi0xLjMtNC00LjctNHEtMC42IDAtMS4zIDAtMC43IDAuMS0xLjMgMC40LTAuNiAwLjMtMS4xIDAuNy0wLjUgMC41LTAuOSAxbC0xLjgtMS44YzEuNi0yLjEgMy40LTIuNiA2LjQtMi42IDUgMCA3LjQgMi4yIDcuNiA2LjJ6bS0yLjkgNGgtNS4ycS00LjEgMC00LjEgMy4zYzAgMi4yIDEuMyAzLjIgNC4yIDMuMnEwLjYgMCAxLjEgMCAwLjYtMC4xIDEuMS0wLjIgMC41LTAuMiAxLTAuNCAwLjUtMC4zIDAuOS0wLjdjMC44LTAuOCAxLjEtMiAxLTMuMXptOS01LjdxLTEuNCAyLjMtMS4yIDUtMC4yIDIuNyAxLjIgNC45YzEgMS40IDIuNiAyLjIgNC4zIDIuMSAxLjYgMCAzLjItMC43IDQuMi0yLjFsMS44IDEuOGMtMS41IDEuOC0zLjcgMi45LTYgMi44LTQuNiAwLTguMS0zLjItOC4xLTkuNSAwLTYuNCAzLjQtOS41IDguMS05LjVxMC44LTAuMSAxLjcgMC4xIDAuOCAwLjIgMS42IDAuNSAwLjggMC40IDEuNSAwLjkgMC42IDAuNSAxLjIgMS4ybC0xLjggMS44Yy0xLTEuNC0yLjYtMi4xLTQuMi0yLjEtMS43LTAuMS0zLjMgMC43LTQuMyAyLjF6bTIwLjcgMi40bDcuNyAxMS44aC0zLjNsLTYuMi0xMC4xLTMuMyAzLjR2Ni43aC0yLjd2LTI2LjdoMi43djE2LjRsOC40LTguMmgzLjN6bTIwLjgtNi44cTAuOCAwLjEgMS41IDAuNSAwLjggMC4zIDEuNSAwLjcgMC43IDAuNSAxLjIgMS4xYzEuOCAxLjkgMi4yIDQgMi4yIDcuNCAwIDMuNS0wLjQgNS43LTIuMiA3LjUtMS41IDEuNi0zLjcgMi41LTUuOSAyLjNxLTAuOCAwLTEuNi0wLjEtMC44LTAuMi0xLjUtMC41LTAuOC0wLjMtMS41LTAuNy0wLjctMC41LTEuMy0xYy0xLjctMS44LTIuMi00LTIuMi03LjUgMC0zLjMgMC41LTUuNiAyLjItNy40IDEuNS0xLjcgMy43LTIuNCA1LjktMi40cTAuOCAwIDEuNyAwLjF6bTEuNyA5LjdjMC0xLjktMC4xLTMuNy0xLTQuNy0xLjMtMS4xLTMuMi0xLjEtNC40IDAtMSAxLTEuMSAyLjgtMS4xIDQuNyAwIDIgMC4xIDMuOCAxLjEgNC43IDEuMiAxLjEgMy4xIDEuMSA0LjQgMCAwLjktMC45IDEtMi42IDEtNC43em0yMi42LTkuNmwtNi45IDE5LjNoLTMuN2wtNy4yLTE5LjNoNS4xbDMuOCAxMS44IDMuOS0xMS44em04LTAuMmM1LjQgMCA4LjQgMy45IDguMyA5LjF2Mi4yaC0xMS45djAuNnEwIDAuOCAwLjQgMS41IDAuNCAwLjcgMC45IDEuMiAwLjYgMC41IDEuNCAwLjggMC43IDAuMyAxLjUgMC4yYzEuNiAwLjIgMy4zLTAuNSA0LjQtMS42bDIuOSAyLjdjLTEuOCAyLjEtNC42IDMuMi03LjMgMy4xLTQuNSAwLTguOS0yLjEtOC45LTEwIDAtNi4yIDMuNC05LjYgOC4zLTkuNnptMy41IDhsLTAuNC0yLjFjLTAuNi0xLjItMS44LTEuOS0zLjItMS45LTEuNCAwLTIuNiAwLjctMy4xIDEuOWwtMC40IDIuMXptMTEuMi01LjljMS4yLTEuNCAzLTIgNC44LTJxMC42IDAgMS4yIDAuMSAwLjYgMC4xIDEuMiAwLjMgMC41IDAuMyAxIDAuNiAwLjUgMC40IDAuOSAwLjhsLTMuNSAzLjZjLTAuNi0wLjctMS41LTEuMS0yLjUtMS4xaC0wLjJjLTEuOCAwLjMtMi45IDEuOC0yLjkgMy42djExLjZoLTQuOHYtMTkuM2g0LjZ2MS44em0xMC4zLTQuM3EwLTEuMSAwLjUtMi4xIDAuNC0wLjkgMS4yLTEuNyAwLjctMC43IDEuNy0xLjEgMS0wLjQgMi4xLTAuNGgyLjd2NC4yaC0yYy0xIDAuMS0xLjQgMC45LTEuNCAxLjh2MmgzLjZ2My44aC0zLjZ2MTUuMWgtNC44em0yOS40IDIuM3EwLjggMC4xIDEuNiAwLjQgMC44IDAuMyAxLjQgMC44IDAuNyAwLjUgMS4zIDEuMWMxLjggMS45IDIuMiA0IDIuMiA3LjQgMCAzLjUtMC40IDUuNy0yLjIgNy41LTEuNSAxLjYtMy43IDIuNC01LjkgMi4zcS0wLjggMC0xLjYtMC4xLTAuOC0wLjItMS42LTAuNS0wLjctMC4zLTEuNC0wLjctMC43LTAuNS0xLjMtMWMtMS44LTEuOC0yLjItNC0yLjItNy41IDAtMy4zIDAuNC01LjYgMi4yLTcuNCAxLjUtMS43IDMuNy0yLjQgNS45LTIuNHEwLjggMCAxLjYgMC4xem0xLjggOS43YzAtMS45LTAuMS0zLjctMS4xLTQuNy0xLjItMS4xLTMuMS0xLjEtNC40IDAtMC45IDEtMS4xIDIuOC0xLjEgNC43IDAgMS45IDAuMiAzLjcgMS4xIDQuNyAxLjMgMS4xIDMuMiAxLjEgNC40IDAgMS0xIDEuMS0yLjYgMS4xLTQuN3ptMjcuMy05LjVoNS4ybC01LjkgMTkuM2gtNC4xbC00LTEyLjEtNCAxMi4xaC0zLjlsLTUuOS0xOS4zaDVsMy4yIDExLjkgMy44LTEyaDMuNGw0IDExLjggMy4yLTExLjh6bS00Mi43IDEzLjljMC4yIDAuOCAwLjkgMS4yIDEuNyAxLjFoMS44djQuMWgtMy40cS0xIDAtMi0wLjUtMC45LTAuNC0xLjYtMS4yLTAuNy0wLjgtMS4xLTEuOC0wLjMtMC45LTAuMi0ydi0yMS4yaDQuOHptLTEzNy44LTExLjJoLTIuNnYxMC42YzAgMS44IDAuNyAyLjggMi41IDIuOGgxLjR2Mi4zaC0yYy0zLjEgMC00LjYtMi4yLTQuNi00Ljl2LTE5LjJoMi43djYuMWg1LjF6Ii8+Cgk8cGF0aCBmaWxsPSIjYmNiYmJiIiBkPSJtMzUuNiA0NS41di0xMi40aDUuNXYxNy45aC00MS4xdi0xNy45aDUuNXYxMi40eiIvPgoJPHBhdGggZmlsbD0iI2Y0ODAyNCIgZD0ibTMxLjUgMzUuOGwxLjEtNC4xLTIyLjEtNC41LTAuOSA0LjV6bS0xOC45LTE0LjlsMjAuNSA5LjcgMS45LTQuMi0yMC41LTkuNnptNS44LTEwLjJsMTcuMiAxNC42IDIuOS0zLjUtMTcuNC0xNC42LTIuOSAzLjV6bTExLjEtMTAuOGwtMy43IDIuOCAxMy42IDE4LjMgMy43LTIuN3ptLTE5LjkgMzcuMmgyMS45djQuMWgtMjEuOXoiLz4KPC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MSI+Cgk8cGF0aCBmaWxsPSIjMjIyNDI2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im02MyAzNi43YzAgMy41LTMuMiA1LjYtNy42IDUuNi0yLjcgMC4yLTUuNC0wLjctNy41LTIuNmwxLjgtMS44YzEuNSAxLjUgMy42IDIuMyA1LjcgMi4yIDMuMSAwIDUtMS4xIDUtMy4zIDAtMS43LTAuOC0yLjYtMy0yLjhsLTMuMS0wLjJjLTMuNS0wLjMtNS40LTItNS40LTUgMC0zLjMgMi43LTUuNCA2LjctNS40cTAuOSAwIDEuNyAwLjEgMC45IDAuMSAxLjcgMC4zIDAuOSAwLjMgMS43IDAuNyAwLjcgMC4zIDEuNSAwLjlsLTEuOCAxLjhjLTEuNC0xLjEtMy4yLTEuNy01LTEuNi0yLjcgMC00LjEgMS4xLTQuMSAzLjEgMCAxLjYgMC45IDIuNiAzLjIgMi43bDMgMC4zYzMuMyAwLjMgNS41IDEuNCA1LjUgNXptMjMuNy03LjJ2MTIuNWgtMi44di0xLjhjLTEuNCAxLjQtMy40IDIuMS01LjMgMi0yLjYgMC00LjEtMC40LTUuMi0xLjctMS0wLjktMS40LTIuMy0xLjQtMy43IDAtMy4zIDIuMi01LjQgNi4zLTUuNGg1LjV2LTEuOGMwLTIuNi0xLjMtNC00LjctNHEtMC42IDAtMS4zIDAtMC43IDAuMS0xLjMgMC40LTAuNiAwLjMtMS4xIDAuNy0wLjUgMC41LTAuOSAxbC0xLjgtMS44YzEuNi0yLjEgMy40LTIuNiA2LjQtMi42IDUgMCA3LjQgMi4yIDcuNiA2LjJ6bS0yLjkgNGgtNS4ycS00LjEgMC00LjEgMy4zYzAgMi4yIDEuMyAzLjIgNC4yIDMuMnEwLjYgMCAxLjEgMCAwLjYtMC4xIDEuMS0wLjIgMC41LTAuMiAxLTAuNCAwLjUtMC4zIDAuOS0wLjdjMC44LTAuOCAxLjEtMiAxLTMuMXptOS01LjdxLTEuNCAyLjMtMS4yIDUtMC4yIDIuNyAxLjIgNC45YzEgMS40IDIuNiAyLjIgNC4zIDIuMSAxLjYgMCAzLjItMC43IDQuMi0yLjFsMS44IDEuOGMtMS41IDEuOC0zLjcgMi45LTYgMi44LTQuNiAwLTguMS0zLjItOC4xLTkuNSAwLTYuNCAzLjQtOS41IDguMS05LjVxMC44LTAuMSAxLjcgMC4xIDAuOCAwLjIgMS42IDAuNSAwLjggMC40IDEuNSAwLjkgMC42IDAuNSAxLjIgMS4ybC0xLjggMS44Yy0xLTEuNC0yLjYtMi4xLTQuMi0yLjEtMS43LTAuMS0zLjMgMC43LTQuMyAyLjF6bTIwLjcgMi40bDcuNyAxMS44aC0zLjNsLTYuMi0xMC4xLTMuMyAzLjR2Ni43aC0yLjd2LTI2LjdoMi43djE2LjRsOC40LTguMmgzLjN6bTIwLjgtNi44cTAuOCAwLjEgMS41IDAuNSAwLjggMC4zIDEuNSAwLjcgMC43IDAuNSAxLjIgMS4xYzEuOCAxLjkgMi4yIDQgMi4yIDcuNCAwIDMuNS0wLjQgNS43LTIuMiA3LjUtMS41IDEuNi0zLjcgMi41LTUuOSAyLjNxLTAuOCAwLTEuNi0wLjEtMC44LTAuMi0xLjUtMC41LTAuOC0wLjMtMS41LTAuNy0wLjctMC41LTEuMy0xYy0xLjctMS44LTIuMi00LTIuMi03LjUgMC0zLjMgMC41LTUuNiAyLjItNy40IDEuNS0xLjcgMy43LTIuNCA1LjktMi40cTAuOCAwIDEuNyAwLjF6bTEuNyA5LjdjMC0xLjktMC4xLTMuNy0xLTQuNy0xLjMtMS4xLTMuMi0xLjEtNC40IDAtMSAxLTEuMSAyLjgtMS4xIDQuNyAwIDIgMC4xIDMuOCAxLjEgNC43IDEuMiAxLjEgMy4xIDEuMSA0LjQgMCAwLjktMC45IDEtMi42IDEtNC43em0yMi42LTkuNmwtNi45IDE5LjNoLTMuN2wtNy4yLTE5LjNoNS4xbDMuOCAxMS44IDMuOS0xMS44em04LTAuMmM1LjQgMCA4LjQgMy45IDguMyA5LjF2Mi4yaC0xMS45djAuNnEwIDAuOCAwLjQgMS41IDAuNCAwLjcgMC45IDEuMiAwLjYgMC41IDEuNCAwLjggMC43IDAuMyAxLjUgMC4yYzEuNiAwLjIgMy4zLTAuNSA0LjQtMS42bDIuOSAyLjdjLTEuOCAyLjEtNC42IDMuMi03LjMgMy4xLTQuNSAwLTguOS0yLjEtOC45LTEwIDAtNi4yIDMuNC05LjYgOC4zLTkuNnptMy41IDhsLTAuNC0yLjFjLTAuNi0xLjItMS44LTEuOS0zLjItMS45LTEuNCAwLTIuNiAwLjctMy4xIDEuOWwtMC40IDIuMXptMTEuMi01LjljMS4yLTEuNCAzLTIgNC44LTJxMC42IDAgMS4yIDAuMSAwLjYgMC4xIDEuMiAwLjMgMC41IDAuMyAxIDAuNiAwLjUgMC40IDAuOSAwLjhsLTMuNSAzLjZjLTAuNi0wLjctMS41LTEuMS0yLjUtMS4xaC0wLjJjLTEuOCAwLjMtMi45IDEuOC0yLjkgMy42djExLjZoLTQuOHYtMTkuM2g0LjZ2MS44em0xMC4zLTQuM3EwLTEuMSAwLjUtMi4xIDAuNC0wLjkgMS4yLTEuNyAwLjctMC43IDEuNy0xLjEgMS0wLjQgMi4xLTAuNGgyLjd2NC4yaC0yYy0xIDAuMS0xLjQgMC45LTEuNCAxLjh2MmgzLjZ2My44aC0zLjZ2MTUuMWgtNC44em0yOS40IDIuM3EwLjggMC4xIDEuNiAwLjQgMC44IDAuMyAxLjQgMC44IDAuNyAwLjUgMS4zIDEuMWMxLjggMS45IDIuMiA0IDIuMiA3LjQgMCAzLjUtMC40IDUuNy0yLjIgNy41LTEuNSAxLjYtMy43IDIuNC01LjkgMi4zcS0wLjggMC0xLjYtMC4xLTAuOC0wLjItMS42LTAuNS0wLjctMC4zLTEuNC0wLjctMC43LTAuNS0xLjMtMWMtMS44LTEuOC0yLjItNC0yLjItNy41IDAtMy4zIDAuNC01LjYgMi4yLTcuNCAxLjUtMS43IDMuNy0yLjQgNS45LTIuNHEwLjggMCAxLjYgMC4xem0xLjggOS43YzAtMS45LTAuMS0zLjctMS4xLTQuNy0xLjItMS4xLTMuMS0xLjEtNC40IDAtMC45IDEtMS4xIDIuOC0xLjEgNC43IDAgMS45IDAuMiAzLjcgMS4xIDQuNyAxLjMgMS4xIDMuMiAxLjEgNC40IDAgMS0xIDEuMS0yLjYgMS4xLTQuN3ptMjcuMy05LjVoNS4ybC01LjkgMTkuM2gtNC4xbC00LTEyLjEtNCAxMi4xaC0zLjlsLTUuOS0xOS4zaDVsMy4yIDExLjkgMy44LTEyaDMuNGw0IDExLjggMy4yLTExLjh6bS00Mi43IDEzLjljMC4yIDAuOCAwLjkgMS4yIDEuNyAxLjFoMS44djQuMWgtMy40cS0xIDAtMi0wLjUtMC45LTAuNC0xLjYtMS4yLTAuNy0wLjgtMS4xLTEuOC0wLjMtMC45LTAuMi0ydi0yMS4yaDQuOHptLTEzNy44LTExLjJoLTIuNnYxMC42YzAgMS44IDAuNyAyLjggMi41IDIuOGgxLjR2Mi4zaC0yYy0zLjEgMC00LjYtMi4yLTQuNi00Ljl2LTE5LjJoMi43djYuMWg1LjF6Ii8+Cgk8cGF0aCBmaWxsPSIjYmNiYmJiIiBkPSJtMzUuNiA0NS41di0xMi40aDUuNXYxNy45aC00MS4xdi0xNy45aDUuNXYxMi40eiIvPgoJPHBhdGggZmlsbD0iI2Y0ODAyNCIgZD0ibTMxLjUgMzUuOGwxLjEtNC4xLTIyLjEtNC41LTAuOSA0LjV6bS0xOC45LTE0LjlsMjAuNSA5LjcgMS45LTQuMi0yMC41LTkuNnptNS44LTEwLjJsMTcuMiAxNC42IDIuOS0zLjUtMTcuNC0xNC42LTIuOSAzLjV6bTExLjEtMTAuOGwtMy43IDIuOCAxMy42IDE4LjMgMy43LTIuN3ptLTE5LjkgMzcuMmgyMS45djQuMWgtMjEuOXoiLz4KPC9zdmc+");
}
.img-color-fill img {
  width: 256px;
  height: auto;
  opacity: 0;
}
<div class="img-color-fill">
  <div></div>
  <img src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MSI+Cgk8cGF0aCBmaWxsPSIjMjIyNDI2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im02MyAzNi43YzAgMy41LTMuMiA1LjYtNy42IDUuNi0yLjcgMC4yLTUuNC0wLjctNy41LTIuNmwxLjgtMS44YzEuNSAxLjUgMy42IDIuMyA1LjcgMi4yIDMuMSAwIDUtMS4xIDUtMy4zIDAtMS43LTAuOC0yLjYtMy0yLjhsLTMuMS0wLjJjLTMuNS0wLjMtNS40LTItNS40LTUgMC0zLjMgMi43LTUuNCA2LjctNS40cTAuOSAwIDEuNyAwLjEgMC45IDAuMSAxLjcgMC4zIDAuOSAwLjMgMS43IDAuNyAwLjcgMC4zIDEuNSAwLjlsLTEuOCAxLjhjLTEuNC0xLjEtMy4yLTEuNy01LTEuNi0yLjcgMC00LjEgMS4xLTQuMSAzLjEgMCAxLjYgMC45IDIuNiAzLjIgMi43bDMgMC4zYzMuMyAwLjMgNS41IDEuNCA1LjUgNXptMjMuNy03LjJ2MTIuNWgtMi44di0xLjhjLTEuNCAxLjQtMy40IDIuMS01LjMgMi0yLjYgMC00LjEtMC40LTUuMi0xLjctMS0wLjktMS40LTIuMy0xLjQtMy43IDAtMy4zIDIuMi01LjQgNi4zLTUuNGg1LjV2LTEuOGMwLTIuNi0xLjMtNC00LjctNHEtMC42IDAtMS4zIDAtMC43IDAuMS0xLjMgMC40LTAuNiAwLjMtMS4xIDAuNy0wLjUgMC41LTAuOSAxbC0xLjgtMS44YzEuNi0yLjEgMy40LTIuNiA2LjQtMi42IDUgMCA3LjQgMi4yIDcuNiA2LjJ6bS0yLjkgNGgtNS4ycS00LjEgMC00LjEgMy4zYzAgMi4yIDEuMyAzLjIgNC4yIDMuMnEwLjYgMCAxLjEgMCAwLjYtMC4xIDEuMS0wLjIgMC41LTAuMiAxLTAuNCAwLjUtMC4zIDAuOS0wLjdjMC44LTAuOCAxLjEtMiAxLTMuMXptOS01LjdxLTEuNCAyLjMtMS4yIDUtMC4yIDIuNyAxLjIgNC45YzEgMS40IDIuNiAyLjIgNC4zIDIuMSAxLjYgMCAzLjItMC43IDQuMi0yLjFsMS44IDEuOGMtMS41IDEuOC0zLjcgMi45LTYgMi44LTQuNiAwLTguMS0zLjItOC4xLTkuNSAwLTYuNCAzLjQtOS41IDguMS05LjVxMC44LTAuMSAxLjcgMC4xIDAuOCAwLjIgMS42IDAuNSAwLjggMC40IDEuNSAwLjkgMC42IDAuNSAxLjIgMS4ybC0xLjggMS44Yy0xLTEuNC0yLjYtMi4xLTQuMi0yLjEtMS43LTAuMS0zLjMgMC43LTQuMyAyLjF6bTIwLjcgMi40bDcuNyAxMS44aC0zLjNsLTYuMi0xMC4xLTMuMyAzLjR2Ni43aC0yLjd2LTI2LjdoMi43djE2LjRsOC40LTguMmgzLjN6bTIwLjgtNi44cTAuOCAwLjEgMS41IDAuNSAwLjggMC4zIDEuNSAwLjcgMC43IDAuNSAxLjIgMS4xYzEuOCAxLjkgMi4yIDQgMi4yIDcuNCAwIDMuNS0wLjQgNS43LTIuMiA3LjUtMS41IDEuNi0zLjcgMi41LTUuOSAyLjNxLTAuOCAwLTEuNi0wLjEtMC44LTAuMi0xLjUtMC41LTAuOC0wLjMtMS41LTAuNy0wLjctMC41LTEuMy0xYy0xLjctMS44LTIuMi00LTIuMi03LjUgMC0zLjMgMC41LTUuNiAyLjItNy40IDEuNS0xLjcgMy43LTIuNCA1LjktMi40cTAuOCAwIDEuNyAwLjF6bTEuNyA5LjdjMC0xLjktMC4xLTMuNy0xLTQuNy0xLjMtMS4xLTMuMi0xLjEtNC40IDAtMSAxLTEuMSAyLjgtMS4xIDQuNyAwIDIgMC4xIDMuOCAxLjEgNC43IDEuMiAxLjEgMy4xIDEuMSA0LjQgMCAwLjktMC45IDEtMi42IDEtNC43em0yMi42LTkuNmwtNi45IDE5LjNoLTMuN2wtNy4yLTE5LjNoNS4xbDMuOCAxMS44IDMuOS0xMS44em04LTAuMmM1LjQgMCA4LjQgMy45IDguMyA5LjF2Mi4yaC0xMS45djAuNnEwIDAuOCAwLjQgMS41IDAuNCAwLjcgMC45IDEuMiAwLjYgMC41IDEuNCAwLjggMC43IDAuMyAxLjUgMC4yYzEuNiAwLjIgMy4zLTAuNSA0LjQtMS42bDIuOSAyLjdjLTEuOCAyLjEtNC42IDMuMi03LjMgMy4xLTQuNSAwLTguOS0yLjEtOC45LTEwIDAtNi4yIDMuNC05LjYgOC4zLTkuNnptMy41IDhsLTAuNC0yLjFjLTAuNi0xLjItMS44LTEuOS0zLjItMS45LTEuNCAwLTIuNiAwLjctMy4xIDEuOWwtMC40IDIuMXptMTEuMi01LjljMS4yLTEuNCAzLTIgNC44LTJxMC42IDAgMS4yIDAuMSAwLjYgMC4xIDEuMiAwLjMgMC41IDAuMyAxIDAuNiAwLjUgMC40IDAuOSAwLjhsLTMuNSAzLjZjLTAuNi0wLjctMS41LTEuMS0yLjUtMS4xaC0wLjJjLTEuOCAwLjMtMi45IDEuOC0yLjkgMy42djExLjZoLTQuOHYtMTkuM2g0LjZ2MS44em0xMC4zLTQuM3EwLTEuMSAwLjUtMi4xIDAuNC0wLjkgMS4yLTEuNyAwLjctMC43IDEuNy0xLjEgMS0wLjQgMi4xLTAuNGgyLjd2NC4yaC0yYy0xIDAuMS0xLjQgMC45LTEuNCAxLjh2MmgzLjZ2My44aC0zLjZ2MTUuMWgtNC44em0yOS40IDIuM3EwLjggMC4xIDEuNiAwLjQgMC44IDAuMyAxLjQgMC44IDAuNyAwLjUgMS4zIDEuMWMxLjggMS45IDIuMiA0IDIuMiA3LjQgMCAzLjUtMC40IDUuNy0yLjIgNy41LTEuNSAxLjYtMy43IDIuNC01LjkgMi4zcS0wLjggMC0xLjYtMC4xLTAuOC0wLjItMS42LTAuNS0wLjctMC4zLTEuNC0wLjctMC43LTAuNS0xLjMtMWMtMS44LTEuOC0yLjItNC0yLjItNy41IDAtMy4zIDAuNC01LjYgMi4yLTcuNCAxLjUtMS43IDMuNy0yLjQgNS45LTIuNHEwLjggMCAxLjYgMC4xem0xLjggOS43YzAtMS45LTAuMS0zLjctMS4xLTQuNy0xLjItMS4xLTMuMS0xLjEtNC40IDAtMC45IDEtMS4xIDIuOC0xLjEgNC43IDAgMS45IDAuMiAzLjcgMS4xIDQuNyAxLjMgMS4xIDMuMiAxLjEgNC40IDAgMS0xIDEuMS0yLjYgMS4xLTQuN3ptMjcuMy05LjVoNS4ybC01LjkgMTkuM2gtNC4xbC00LTEyLjEtNCAxMi4xaC0zLjlsLTUuOS0xOS4zaDVsMy4yIDExLjkgMy44LTEyaDMuNGw0IDExLjggMy4yLTExLjh6bS00Mi43IDEzLjljMC4yIDAuOCAwLjkgMS4yIDEuNyAxLjFoMS44djQuMWgtMy40cS0xIDAtMi0wLjUtMC45LTAuNC0xLjYtMS4yLTAuNy0wLjgtMS4xLTEuOC0wLjMtMC45LTAuMi0ydi0yMS4yaDQuOHptLTEzNy44LTExLjJoLTIuNnYxMC42YzAgMS44IDAuNyAyLjggMi41IDIuOGgxLjR2Mi4zaC0yYy0zLjEgMC00LjYtMi4yLTQuNi00Ljl2LTE5LjJoMi43djYuMWg1LjF6Ii8+Cgk8cGF0aCBmaWxsPSIjYmNiYmJiIiBkPSJtMzUuNiA0NS41di0xMi40aDUuNXYxNy45aC00MS4xdi0xNy45aDUuNXYxMi40eiIvPgoJPHBhdGggZmlsbD0iI2Y0ODAyNCIgZD0ibTMxLjUgMzUuOGwxLjEtNC4xLTIyLjEtNC41LTAuOSA0LjV6bS0xOC45LTE0LjlsMjAuNSA5LjcgMS45LTQuMi0yMC41LTkuNnptNS44LTEwLjJsMTcuMiAxNC42IDIuOS0zLjUtMTcuNC0xNC42LTIuOSAzLjV6bTExLjEtMTAuOGwtMy43IDIuOCAxMy42IDE4LjMgMy43LTIuN3ptLTE5LjkgMzcuMmgyMS45djQuMWgtMjEuOXoiLz4KPC9zdmc+">
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接