颜色固定White color icon.png to blue color icon.png (html/css) , 但最小(或最大)怎么办?
div {
width: 50px;
height: 50px;
margin: 50px;
padding: 50px;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
background-size: 50px;
mask-size: 50px; /* not supported by Chrome */
-webkit-mask-image: 50px; /* also not supported by Chrome */
background-color: blue; /* select your want color */
-webkit-mask-image:
url(https://image.flaticon.com/icons/png/512/54/54591.png);
mask-image: url(https://image.flaticon.com/icons/png/512/54/54591.png);
mask-repeat:no-repeat;
-webkit-mask-repeat:no-repeat;
}
<div></div>
如何缩小尺寸?
margin: 50px; padding: 50px;
没有
left: 50px; right: 50px; top: 50px; bottom: 50px;
没有
background-size: 50px;
没有
mask-size: 50px;
不,Chrome 不支持
webkit-mask-size: 50px;
不,Chrome 也不支持
width: 50px; height: 50px;
没有
怎么办?
最佳答案
您可以依靠 mix-blend-mode
而不是蒙版,然后您可以轻松地将图像调整为简单背景:
div.box {
width: 50px;
height: 50px;
padding: 50px;
background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;
position: relative;
background-color: #fff;
}
div.box:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
mix-blend-mode: lighten;
}
<div class="box"></div>
你也可以通过调整伪元素只改变图片的一部分颜色:
div.box {
width: 150px;
height: 150px;
background: url(https://image.flaticon.com/icons/png/512/54/54591.png) center/cover;
position: relative;
background-color: #fff;
}
div.box:before {
content: "";
position: absolute;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
background: blue;
mix-blend-mode: lighten;
}
<div class="box"></div>
关于html - 缩小尺寸(掩模图像)。你能帮助我吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54008461/