您正在使用 IPV4 [3.236.145.153] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中      
[公益] 地球是我家,绿化靠大家      
2024年 妇女节 010
2024年 清明节 037
2025年 元 旦 309
2025年 春 节 337
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
css3实现背景图片颜色修改的多种方式
内容摘要: 方式一:利用css3滤镜filter中的drop-shadow代码如下:style.icon{display:inline-block;width:180px;height:180px;background:url('img/XXX.png')no-repeatcentercover;overflow:hidden;}.icon:after{content:......
方式一:利用css3滤镜filter中的drop-shadow

代码如下:

<style>

.icon{

display:inline-block;

width:180px;

height:180px;

background:url('img/XXX.png')no-repeatcentercover;

overflow:hidden;

}

.icon:after{

content:'';

display:block;

height:100%;

transform:translateX(-100%);

background:inherit;

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

}

</style>

<iclass="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>

<iclass="icon"></i>

说明:

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

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

总结:

方式一局限于png格式的图片,方式二不限制图片的格式。

css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:CSS3调整背景图片大小的操作代码

 

下一篇:JS表格的动态操作完整示例

发布日期:2024/1/23
手机扫二维码直达本页
发布时间:11:52:53
点  击:23
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....