gpt4 book ai didi

html - CSS:背景颜色和图标 - 反转蒙版

转载 作者:行者123 更新时间:2023-11-28 01:37:20 27 4
gpt4 key购买 nike

这是一个艰难的过程。假设我有一个 div,具有特定的大小(widthheight),以及一个 background-color: pink;。现在假设我有一个图标,一个 png 文件(或 svg 或任何东西),我希望图像“挖掘”到背景颜色中。换句话说,我希望图标以透明方式显示,并且周围都是粉红色。像这样: example它就像 mask-image 属性一样,正好相反。


详情:

  • 无需考虑浏览器兼容性(不用于生产)
  • 我不会使用 Javascript 或 JQ (html/css)
  • 当然我不能编辑 png 文件(反转透明度和颜色 ;))

这里有两个与背景颜色相匹配的 PNG:

stackoverflow pacman


相关:


你们有实现这种行为的任何线索吗?如果您需要更多详细信息,请告诉我。

最佳答案

当在 div 中时,您可能想在 image 上使用 filter: invert(1);:

图像不会深入到 div 内部,但如果 div 后面的颜色相同,则视觉效果很好。(我在 body 上添加了不同的颜色来说明这种不受欢迎的行为)

body{
background: #ddd;
}

div {
width: 200px;
height: 140px;
background-color: pink;
}

div img {
/* You may want to add brightness(0) before invert for some images */
filter: invert(1);
}
<body>
<div class="img_container">
<img src="https://image.flaticon.com/icons/png/128/61/61072.png" />
</div>
<p>Original image:</p>
<img src="https://image.flaticon.com/icons/png/128/61/61072.png" />
</body>

请注意,我没有使用您的图像,因为它不仅是黑色而且是透明的。

关于html - CSS:背景颜色和图标 - 反转蒙版,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50604875/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com