颜色可变图标
博客专区 > Wings_J 的博客 > 博客详情
颜色可变图标
Wings_J 发表于1个月前
颜色可变图标
  • 发表于 1个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

    如果用 JPG、PNG 等来显示图片,图片的颜色不能改变。在不同的网页风格下,有时需要不同颜色的图标,此时用传统的图片就需要再次编辑,不能通过代码改变。

    这里提出了一种解决方案,用 PNG 图片和 mask-image 使得图标的颜色可以通过 CSS 代码改变。

CSS 代码:

.colorAlterableIcon
{
    background:white;       /*背景色*/
}

.colorAlterableIcon::before
{
    content:"";

    display:block;

    width:100%;
    height:100%;

    background:black;       /*前景色*/

    -webkit-mask-image: url();      /*图标掩膜,白色区域显示*/
    mask-image: url();
    -webkit-mask-size: contain;
    mask-image: contain;
}

    前景色决定图标颜色,mask-image:url() 属性为图标的掩膜,图片中有颜色的部分将被着色,透明部分不着色。在上述代码中的 mask-image 的属性填入图标的地址,通过改变前景色(.colorAterableIcon::before 中的 background 属性),可以改变图标的颜色

共有 人打赏支持
粉丝 0
博文 12
码字总数 7228
×
Wings_J
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: