css改变图标颜色 |
您所在的位置：网站首页 › gta5图标怎么改颜色 › css改变图标颜色 |
css改变图标颜色
|
一、CSS3 mask CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。因此，我们只需要把目标图标颜色#f4615c作为背景色，然后原始图标（无论什么颜色都可以）作为遮罩图片，效果就出来了。 效果： DOCTYPE html> img { width: 60px; height: 60px; } .colorful { display: inline-block; width: 60px; height: 60px; background: linear-gradient(to right, red, yellow, green); background-size: 80%; -webkit-mask: url(img/snowflake.png) no-repeat; -webkit-mask-size: 100% 100%; mask: url(img/snowflake.png) no-repeat; mask-size: 100% 100%; } 原图 变成指定红色 效果图片
二、css background-blend-mode 此方法图片必须是黑图白底，如果是彩色的，颜色会混淆在一起；其次非图形部分必须是白色，不能是透明，因为透明会被当做黑色处理。 DOCTYPE html> img { width: 60px; height: 60px; } .colorful { display: inline-block; width: 60px; height: 60px; background:url(img/snowflake1.jpg) no-repeat, linear-gradient(to right, red, yellow, green) ; background-size:cover; background-blend-mode: lighten; } 原图 变成指定红色效果
三、css滤镜drop-shadow 使用了CSS3滤镜filter中的drop-shadow(drop-shadow滤镜可以给元素或图片非透明区域添加投影）。用drop-shadow添加投影模糊度为0,再隐藏原图片。 DOCTYPE html> .wrap { width: 60px; height: 60px; overflow: hidden; } img { width: 60px; height: 60px; position: relative; left: -60px; /*在Chrome浏览器下(低版本)，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。*/ border-right: 60px solid transparent; filter: drop-shadow(60px 0px 0 red); }效果
|
【本文地址】
今日新闻 |
推荐新闻 |