美文网首页
css3改变图片颜色

css3改变图片颜色

作者: 一枚倔强的程序员 | 来源:发表于2020-10-14 11:22 被阅读0次

css3改变图标颜色,用到filter(滤镜)这个属性(注意,是需要纯色的图片,白色背景或者透明背景的图片),下面看例子吧

<div class="main">
            <img class="img1" src="http://img.tgimg.cn/Home/share-icon.png" /><br />
            <img class="img2" src="//img.tgimg.cn/Mproject/v5/new_subscribe.png" /><br />
            <img class="img3" src="//img.tgimg.cn/Project/newLogin/close-btn-hover.png" /><br />
            <img class="img4" src="//img.tgimg.cn/Project/newJuniorDetail/contacts-ico.png" /><br />
            <img class="img5" src="//img.tgimg.cn/Project/newJuniorDetail/query-icon.png" /><br />
            <img class="img6" src="//img.tgimg.cn/Project/newJuniorDetail/close-photo-pop.png" /><br />
        </div>
.img1 {
    display: block;
    width: 22px;
    height: 24px;
    background: url('http://img.tgimg.cn/Home/share-icon.png');
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    /* Chrome, Safari, Opera */
    filter: drop-shadow(200px 0 0 #f60);
}

.img2 {
    display: block;
    width: 196px;
    height: 196px;
    background: url('http://img.tgimg.cn/Mproject/v5/new_subscribe.png');
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    filter: drop-shadow(200px 0 0 #f60);
}

.img3 {
    display: block;
    width: 16px;
    height: 16px;
    background: url('//img.tgimg.cn/Project/newLogin/close-btn-hover.png');
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    filter: drop-shadow(200px 0 0 #f60);
}

.img4 {
    width: 67px;
    height: 72px;
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    filter: drop-shadow(200px 0 0 #f60);
}

.img5 {
    width: 66px;
    height: 66px;
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    filter: drop-shadow(200px 0 0 #f60);
}

.img6 {
    width: 24px;
    height: 24px;
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    filter: drop-shadow(200px 0 0 #f60);
}

看图


574b0e39c521f7e65b31c0a72d5889d.png

相关文章

  • css3改变图片颜色

    css3改变图标颜色,用到filter(滤镜)这个属性(注意,是需要纯色的图片,白色背景或者透明背景的图片),下面...

  • css 一些技巧

    鼠标选择字体时候改变颜色 和背景颜色 CSS3 filter(滤镜) 属性

  • iOS改变图片的颜色

    iOS改变图片的颜色 iOS改变图片的颜色

  • iOS 改变纯色图片颜色与旋转控件

    创建图片 添加图片 改变图片颜色 旋转 旋转和改变图片颜色 都可以在图片样式一样 只是颜色和角度有差异的情况使用 ...

  • 改变图片颜色

    很多时候 美工给的图片 颜色并不合适 或者 急需一个其他颜色的 已有图标 可以用这个方法 改变图标颜色

  • 改变图片颜色

    //改变图片颜色 - (UIImage *)imageWithColor:(UIColor *)color ima...

  • 改变图片颜色

    UIImage *image=[UIImage imageNamed:@"booknote"]; image=[i...

  • 改变图片颜色

    UIImage *image=[UIImage imageNamed:@"go-pro"]; image=[ima...

  • 改变图片颜色

    xml设置图片颜色 代码设置图片颜色

  • CSS3改变透明图片边框颜色

    原理:通过css3投影属性,通过overflow: hidden隐藏掉原图,显示投影图,再通过drop-shado...

网友评论

      本文标题:css3改变图片颜色

      本文链接:https://www.haomeiwen.com/subject/swwipktx.html