精华内容
下载资源
问答
  • 本文给大家分享一百种方法帮助大家解决CSS改变图片颜色,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 需求如下图,hover的时候改变图标颜色,图标为引入的svg img一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?但是为了更小的开销,一般css为更好的...

    需求如下图,hover的时候改变图标颜色,图标为引入的svg img

    3a4ff443f7bffb34e45006d4a8f523f6.png

    一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?

    但是为了更小的开销,一般css为更好的解决方案,svg的颜色是在标签内通过fill属性写死的,所以用到了使用了css3滤镜filter中的drop-shadow。

    代码如下:

    advantage

    {item.line1}

    {item.line2}

    section{

    .image{

    display: inline-block;

    overflow: hidden;

    }

    img{

    position: relative;

    left: 0;

    margin-bottom: .1rem;

    filter: drop-shadow(#ffffff 80px 0);

    }

    &:hover{

    background-color: gray;

    img{

    left: -80px;

    }

    }

    }

    drop-shadow(h-shadow v-shadow blur spread color):给图像设置一个阴影效果。其中 分别设置阴影的偏移量,且必填。具体可以查看w3c的标准

    主要的实现原理就是设置需要的阴影效果,并隐藏,hover时切换显示就好,简单,但是之前没怎么了解到

    展开全文
  • CSS中有着CSS滤镜之称的filter属性,他可以让图片模糊,锐化等。filter属性支持一下关键字:none():没有任何效果,默认为none;img{width: 300px;filter: none;}效果图:blur():高斯模糊,length值越大越模糊;...

    一般提到对对图片的处理,都会想到PS。但,其实在前端,CSS也有一些属性起到相同的效果。在CSS中有着CSS滤镜之称的filter属性,他可以让图片模糊,锐化等。

    filter属性支持一下关键字:

    none():没有任何效果,默认为none;

    img{

    width: 300px;

    filter: none;

    }

    效果图:

    8f3ed692124b47e8c9445a1592f409d0.png

    blur():高斯模糊,length值越大越模糊;

    img{

    width: 300px;

    filter: blur(4px);

    }

    7dd724e1a167144d279810acfe33aad9.png

    8f3ed692124b47e8c9445a1592f409d0.png

    brightness():线性乘法,可以让图片看起来更亮或者更暗;

    img{

    width: 300px;

    filter: brightness(80%);

    }

    5e6cdbec74c6c47bc90feb30abe5a68c.png

    8f3ed692124b47e8c9445a1592f409d0.png

    将filter: brightness(80%);改为filter: brightness(20%);时图片变暗了,说明百分百比越大越亮,越小越暗。

    02b32de1c46918706f5fb40ce392b3ac.png

    8f3ed692124b47e8c9445a1592f409d0.png

    contrast():对比度;

    img{

    width: 300px;

    filter: contrast(50%);

    }

    6653294a024156d91b85cb0cbfdd33c0.png

    8f3ed692124b47e8c9445a1592f409d0.png

    drop-shadow():给图像设置一个阴影效果;

    img{

    width: 300px;

    filter: drop-shadow(300px 0 0 #0B85CC);

    }

    drop-shadow(h-shadow v-shadow blur spread color);

    593f8e47786371eee9af62e0fc65aba2.png

    grayscale():将图像转换为灰度图像;

    img{

    width: 300px;

    filter: grayscale(80%);

    }

    87b1d0f4df1d5d277df3bfaedb3a30fd.png

    8f3ed692124b47e8c9445a1592f409d0.png

    hue-rotate():色相旋转;

    img{

    width: 300px;

    filter: hue-rotate(70deg);

    }

    16b3f9a6720b4f8332cbe77042983641.png

    8f3ed692124b47e8c9445a1592f409d0.png

    invert():反转;

    img{

    width: 300px;

    filter: invert(100%);

    }

    d91502d1b4ba477cd88655ca18d8f9dc.png

    8f3ed692124b47e8c9445a1592f409d0.png

    有点曝光的感觉。

    opacity():透明化:

    img{

    width: 300px;

    filter: opacity(10%);

    }

    fff7a65da53b716e139912326164928b.png

    8f3ed692124b47e8c9445a1592f409d0.png

    saturate();

    sepia():将图像转换为深褐色;

    url();  (还不会) 。

    以上右边图片除了阴影属性其它都为原图来对比。

    展开全文
  • CSS改变图片颜色之filter属性

    千次阅读 2018-09-20 15:46:42
    CSS中有着CSS滤镜之称的filter属性,他可以让图片模糊,锐化等。  filter属性支持一下关键字: none():没有任何效果,默认为none; img{ width: 300px; filter: none; } 效果图:...

             一般提到对对图片的处理,都会想到PS。但,其实在前端,CSS也有一些属性起到相同的效果。在CSS中有着CSS滤镜之称的filter属性,他可以让图片模糊,锐化等。

             filter属性支持一下关键字:

    none():没有任何效果,默认为none;

    img{
        width: 300px;
        filter: none;
    }        

    效果图:

    blur():高斯模糊,length值越大越模糊;

    img{
        width: 300px;
        filter: blur(4px);
    }

    brightness():线性乘法,可以让图片看起来更亮或者更暗;

    img{
        width: 300px;
        filter: brightness(80%);
    }

    将filter: brightness(80%);改为filter: brightness(20%);时图片变暗了,说明百分百比越大越亮,越小越暗。

    contrast():对比度;

    img{
        width: 300px;
        filter: contrast(50%);
    }

    drop-shadow():给图像设置一个阴影效果;

    img{
        width: 300px;
        filter: drop-shadow(300px 0 0 #0B85CC);
    }

    drop-shadow(h-shadow v-shadow blur spread color);

    grayscale():将图像转换为灰度图像;

    img{
        width: 300px;
        filter: grayscale(80%);
    }

    hue-rotate():色相旋转;

    img{
        width: 300px;
        filter: hue-rotate(70deg);
    }

    invert():反转;

    img{
        width: 300px;
        filter: invert(100%);
    }

    有点曝光的感觉。

    opacity():透明化:

    img{
        width: 300px;
        filter: opacity(10%);
    }

    saturate();

    sepia():将图像转换为深褐色;

    url();  (还不会) 。

    以上右边图片除了阴影属性其它都为原图来对比。

        

    展开全文
  • CSS改变图片颜色的100种方法!

    千次阅读 2019-07-26 14:59:58
    作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。 强大的 CSS:filter CSS滤镜(filter)属提供的图形特效,像模糊,...

    说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。

    作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。

    强大的 CSS:filter

    CSS滤镜(filter)属提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。 MDN

    CSS标准里包含了一些已实现预定义效果的函数。

    filter: none        
        | blur() 
        | brightness() 
        | contrast() 
        | drop-shadow() 
        | grayscale() 
        | hue-rotate() 
        | invert() 
        | opacity() 
        | saturate() 
        | sepia() 
        | url();
    web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路 
    

    filter: none

    没有任何效果,默认filter就为none

    filter:blur( ) 高斯模糊

    给图像一个高斯模糊效果,length值越大,图像越模糊

    
    img {
        filter:blur(2px);;
    }
    
    

    brightness(%) 线性乘法

    可以让图片看起来更亮或者更暗

    img {
        filter:brightness(70%);
    }
    
    

    contrast(%) 对比度

    调整图像的对比度。

    img {
        filter:contrast(50%);
    }
    
    

    drop-shadow(h-shadow v-shadow blur spread color)

    给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。函数接受(在CSS3背景中定义)类型的值,除了”inset”关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速

    利用这个方案,我们其实改变类似于一些图标的颜色,比如黑色的图标变成蓝色的图标。

    PNG格式小图标的CSS任意颜色赋色技术

    img {
        filter: drop-shadow(705px 0 0 #ccc);
    }
    
    

    在这里,我们将图片投影形成一个同等大小的灰色区域。

    hue-rotate(deg) 色相旋转

    img {
        filter:hue-rotate(70deg);
    }
    
    

    invert(%) 反转

    这个函数的作用是反转输入图像,有点像曝光的效果

    img {
        filter:invert(100%)
    }
    
    

    grayscale(%) 将图像转换为灰度图像
    这个效果可以将图片做旧,有一种时代沧桑感。喜欢古风的人一定会喜欢上这个效果的

    img {
        filter:grayscale(80%);
    }
    
    

    sepia(%) 将图像转换为深褐色

    下面给我的小姐姐一个暖暖的色调。

    img {
        filter:sepia(50%)
    }
    
    

    大家是不是发现我并没有把url()方法写到这上面来

    没错,因为我想把这个内容放到最后来说,filter:url()就是css滤镜改变图片的终极方法。CSS:filter可以导入一个svg滤镜,作为他自己的滤镜。

    终极变色解决方案! filter:url();

    为什么说filter:url()是图片变色的终极解决方案呢,请容我慢慢道来。

    我们先科普一下PS的工作原理,我们都知道网页是有三原色的R(红) G(绿) B(蓝),常见的RGBA还包括一个opicity值,而opcity值是根据alpha通道计算出来的。也就是说,我们见到的网页的每一个像素点都是由红蓝绿再加alpha四个通道组成,每一个通道我们称之为色板,PS中的8位板的意思就是2的八次方256,意思就是每一个通道的取值范围都是(0-255) –SVG 研究之路 (11) – filter:feColorMatrix

    如果我们可以改变每个通道的值是不是就能完美的得到我们想要的任意颜色了呢,原理上,我们可以像ps那样利用svg滤镜得到任何我们想要的图像,不仅仅是变色。我们甚至可以凭空生成一幅图像。

    svg feColorMatrix

    <svg height="0" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="change">
                    <feColorMatrix type="matrix" values="
                    0 0 0 0 0.55
                    0 0 0 0 0.23 
                    0 0 0 0 0 
                    0 0 0 0 1" />
            </filter>
        </defs>
    </svg>
    <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">
    img {
        filter:url(#change);
    }
    
    

    通过单通道我们可以将图片变成单一的颜色

    <svg height="0" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="change">
                   <feColorMatrix values="3 -1 -1 0 0
                           -1 3 -1 0 0
                           -1 -1 3 0 0
                           0 0 0 1 0" />
            </filter>
        </defs>
    </svg>
    web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路 
    

    通过双通道我们可以的到一些非常炫酷的PS效果

    当然,在这里,只是举个例子,通过配置矩阵中的值,我们可以配置每一个像素点的值按照我们定义的规则显示

    我们在这里详细讲一下feColorMatrix 矩阵的计算方式

    其中Rin Gi

    n Bin a(alpha) 为原始图片中每个像素点的rgba值

    通过矩阵计算,得到的Rout Gout Bout Aout就是最终显示出来的rgba值。

    将图片转为单色 拿棕色rgba(140,59,0,1)作为例子

    根据上面的公式,我们可以简化一些计算,同一行中,只设置一个通道的值,其他通道为0

    不难得出矩阵

    0 0 0 0 目标值R
    0 0 0 0 目标值G
    0 0 0 0 目标值B
    0 0 0 0 1
    
    

    根据规则,只需要计算,255/想要显示的颜色对应通道 = 目标值

    我们想要的棕色rgba(140,59,0,1) 换算成色板 rgba 为 140 59 0 255

    可以算出目标值

    0 0 0 0 0.55
    0 0 0 0 0.23
    0 0 0 0 0 
    0 0 0 0 1
    
    

    多通道设置出炫酷的效果来

    就如同之前我们看到的双通道形成的炫酷图片一般

    我們今天要把圖片的飽和度提高,該怎麼做呢?首先當然是想想飽和度的成因,就是紅的越紅,藍的越藍,綠的越綠,由這個成因出發,我們的矩陣就可以寫成下面的樣子,看到矩陣當中出現了 3 和 -1,一定會很那悶這是怎麼來的,箇中原理其實很容易理解,讓我們假設某一個像素的 RGB 分別是 (200/255),(100/255),(50/255),呈現的應該是有點暗沉的橘色,經過矩陣的換算,R 變成了 200/255×3-100/255-50/255= 1.76, G 變成 200/255x(-1)+100/255*3-50/255=0.2,B 變成 200x(-1)+100x(-1)+50×3=-0.59,因此 RGB 轉換後就是:200×1.76,100×0.2,50x-0.5。SVG 研究之路 (11) – filter:feColorMatrix

    <svg height="0" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="change">
                   <feColorMatrix values="3 -1 -1 0 0
                           -1 3 -1 0 0
                           -1 -1 3 0 0
                           0 0 0 1 0" />
            </filter>
        </defs>
    </svg>
    web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路 
    

    其他方案
    除了feColorMatrix svg滤镜还有很多的方法可以定义滤镜,他们同样可以作用到图片上。由于篇幅限制,这里就不详细展开了

    总结

    css3提供了filter这个属性,使得通过前端技术实现更多炫酷的特效成为了可能

    依赖于svg的滤镜,我们可以实现复杂的滤镜效果

    你学会了吗?

    展开全文
  • 利用CSS改变图片颜色的100种方法!

    万次阅读 多人点赞 2018-09-20 21:17:02
    作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。” 你以为这些是经过PS软件处理出来的?不不不,纯粹的是用css写...
  • 当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面切图网教你,怎么用简单的css改变图片颜色。熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mix-blend-mode 和 ...
  • css改变图片颜色(加有色滤镜)

    千次阅读 2020-07-07 15:09:27
    图片需要改颜色的部分需调成纯黑色,背景为纯白色 <style type="text/css"> .box{ width: 230px; height: 200px; background-image: url(img/bg.png),linear-gradient(#C62F2F,#C62F2F); background-...
  • 最近在开发一个网站时,有许多的图标需要排版,图标大小形状是一样的就是颜色不一样,最常规的办法就是需要切N张图片,来实现。但是那样效率太低了,并且要弄好多图片,于是从寻找更好的解决办法。终于找到了,通过...
  • 之前做项目过程中有时候遇到图片颜色和需求不符,当时就在想如果用纯css能够改变图片颜色就好了,这样的话就不用让UI重新给图片了,现在看来其实是可以实现的,原理就是利用CSS3的滤镜(filter)属性。你想的没错,...
  • CSS改变图片颜色的filter(滤镜)属性

    千次阅读 2019-09-05 21:54:26
    但是,前端css的filter属性一样可以得到一些意想不到的效果(例如:图片模糊与图片饱和度) 今天我们就来挨个介绍一下这些取值产生的效果 也可以参考runoob filter(滤镜) filter的取值有:none | blur() | ...
  • 利用CSS改变图片颜色的多种方法!

    千次阅读 2018-09-19 10:08:35
    作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。”你以为这些是经过PS软件处理出来的?不不不,纯粹的是用css写出来的...
  • css3可以改变图片颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。方式一:利用css3滤镜filter中的 drop-shadow代码如下:.icon{display: ...
  • css改变图片背景色颜色

    千次阅读 2019-05-29 17:43:40
    .colorful { display: inline-block; width: 32px;... // 目标颜色、目标颜色、目标颜色 -webkit-mask: url(jgy_wxz_dt.svg) no-repeat; mask: url(jgy_wxz_dt.svg) no-repeat; -webkit-ma...
  • 当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面就来说说怎么用简单的css改变图片颜色。熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mix-blend-mode 和 ...
  • css filter属性改变图片颜色

    千次阅读 2018-12-15 11:44:55
    之前在做相益项目的时候,有一个点击改变图片颜色的功能,一开始我用两张图片来实现的,后来发现可以用css的过滤器来实现,这样还可以优化性能。 具体实现如下 把图片变为灰色 &lt;!DOCTYPE html&gt; &...
  • CSS改变png图片颜色

    万次阅读 2017-03-05 22:19:34
    来源地址:... 张鑫旭大神的个人网站上看到的,纯属分享和记录 css div.icon{height:20px;width:20px;overflow: hidden;} .icon .icon{width: 20px;height: 20px;display:block;p
  • 有一个需求,就是当鼠标移到图片上的时候,改变图片颜色 变成 这样,红色是大背景颜色,主要想改变的是箭头的颜色,然后箭头是一个png格式的图片,那么当鼠标移上去的时候,怎么改变图片颜色呢? 使用CSS的一...
  • 一般情况下,只有标签中的图片,可以根据宽高设定来改变大小。比如1024x768的图,我们设width="640",height="480",他就会显示640x480。往往为了避免不必要的数据传输,反而不提倡读取非实际大小的图片。但我也没有...
  • 本文出自: ...使用的是 filter drop-shadow 如果你只想兼容 Chrome 那么请看: http://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ 如果你想兼容ios Android 小程序,那么.tian-word {
  • 1、黑色纯色,背景白色的图片 .pic1 { background-image: url($img), linear-gradient(#f00, #f00); //纯色渐变 background-blend-mode: lighten; background-size: cover; //图片铺满屏幕 } .pic3 { ...
  • 可以直接改svg属性,也可以通过css修改,但是前端一般都是通过img标签直接引入的svg图片,这样不管是从后期维护还是代码整洁度考虑,都更佳优秀,但问题也随之而来,没法通过css改变svg的颜色。下面来介绍一种通过...
  • 当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面就来说说怎么用简单的css改变图片颜色。熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mix-blend-mode 和 ...
  • CSS 改变图标颜色

    2019-09-27 09:33:59
    主要利用了css3 filter 滤镜属性 image{ filter: drop-shadow(20px 0 #fff); position: relative; left: -20px; } <view class="close" @click="closeApp"> <image src="/static/images/close.png" ...
  • 通过在颜色板添加混合模式为色相样式,然后通过改变颜色板的颜色使车身部分的颜色改变,因为除了车身,其他部分的颜色为黑白,所以没有随着变色 下面是html代码,一个颜色板color和一个img车的图片,然后设置默认...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,973
精华内容 21,189
关键字:

css改变图片颜色