css修改背景颜色有哪些方法？差异是什么？

发布时间：2023-07-25 13:47:39 所属栏目：语言来源：

导读：今天给大家分享的是css修改背景颜色的方法，在CSS3中，我们想要修改图片的颜色是非常方便的，下面小编就给大家分享两种方法，利用css3滤镜filter中的 drop-shadow和利用css3的mix-blend-mode 和 background-blend-mo

今天给大家分享的是css修改背景颜色的方法，在CSS3中，我们想要修改图片的颜色是非常方便的，下面小编就给大家分享两种方法，利用css3滤镜filter中的 drop-shadow和利用css3的mix-blend-mode 和 background-blend-mode，下面我们就来看看具体怎样实现吧，以及这两种方法的不同在哪。

    方式一：利用css3滤镜filter中的 drop-shadow

    代码如下：

<style>

.icon{

    display: inline-block;

    width: 180px;

    height: 180px;

    background: url('img/XXX.png') no-repeat center cover;

    overflow: hidden;

}

.icon:after{

    content: '';

    display: block;

    height: 100%;

    transform: translateX(-100%);

    background: inherit;

    filter: drop-shadow(144px 0 0 #fff); //需要修改的颜色值

}

</style>

<i class="icon"></i>

    说明：

    drop-shadow 滤镜可以给元素或图片非透明区域添加投影

    将背景透明的 PNG 图标施加一个不带模糊的投影，就等同于生成了另外一个颜色的图标

    再通过 overflow:hidden 和位移处理将原图标隐藏

    mix-blend-mode 取值情况：【除了最后3个，大体和ps效果一样】

mix-blend-mode: normal; // 正常

mix-blend-mode: multiply; // 正片叠底

mix-blend-mode: screen; // 滤色

mix-blend-mode: overlay; // 叠加

mix-blend-mode: darken; // 变暗

mix-blend-mode: lighten; // 变亮

mix-blend-mode: color-dodge; // 颜色减淡

mix-blend-mode: color-burn; // 颜色加深

mix-blend-mode: hard-light; // 强光

mix-blend-mode: soft-light; // 柔光

mix-blend-mode: difference; // 差值

mix-blend-mode: exclusion; // 排除

mix-blend-mode: hue; // 色相

mix-blend-mode: saturation; // 饱和度

mix-blend-mode: color; // 颜色

mix-blend-mode: luminosity; // 亮度

mix-blend-mode: initial; // 默认

mix-blend-mode: inherit; // 继承

mix-blend-mode: unset; // 还原

    方式二：利用css3的mix-blend-mode 和 background-blend-mode

    代码如下：

<style>

.icon{

    display: inline-block;

    width: 180px;

    height: 180px;

    background-image: url($'img/XXX.png'), linear-gradient(#f00, #f00);

    background-blend-mode: lighten;

    background-size: cover;

}

</style>

<i class="icon"></i>

    说明：

    lighten这个混合模式：变亮、变亮模式与变暗模式产生的效果相反，黑色比任何颜色都要暗，所以黑色会被任何色替换掉。反之，如果素材的底色是黑色，主色是白色。那就应该用变暗（darken）的混合模式。

    linear-gradient(#f00, #00f )还可以实现渐变颜色的效果哦。

    总结：

    方式一局限于png格式的图片，方式二不限制图片的格式。css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!