img引入的svg图片,悬浮时怎么修改颜色?

实现效果:鼠标悬浮在这一行,让这行的文字和svg图片颜色发生变化。
因为是用·img标签引入页面,使用fill属性是无效的。
img引入的svg图片,悬浮时怎么修改颜色?_第1张图片
css核心代码

      &:active,
      &:hover {
        transform: scale(0.98);
        img{
          filter: drop-shadow(#409eff 50px 0);
          transform: translateX(-50px);
        }
      }

详细讲解
filter属性用来在元素上创建一个阴影效果,可以模糊、偏移元素。通常用于调整图像、背景和边框的渲染。(通俗讲,就是给图片加滤镜、做处理的)

filter: drop-shadow(): 向图像添加阴影。三个参数:阴影的颜色,阴影水平偏移距离,阴影垂直偏移距离

img{
        filter: drop-shadow(#409eff 50px 0);
        }

img引入的svg图片,悬浮时怎么修改颜色?_第2张图片
就是生成了一个偏移图像阴影,再将它移动到原来的位置上。

原图:
在这里插入图片描述

filter:blur(3px),给图片添加高斯模糊,表示模糊半径为3px。
在这里插入图片描述

filter: contrast(200%),值是 0% 将使图像变灰;值是 100%,则无影响;若值超过 100% 将增强对比度
在这里插入图片描述

filter: grayscale(70%),添加灰度
在这里插入图片描述

filter:invert(75%)反转图片颜色,值为 100% 则图像完全反转,值为 0% 则图像无变化
在这里插入图片描述

filter: hue-rotate(90deg),色相旋转, 会改变图片原来颜色。
在这里插入图片描述

filter: opacity(50%),添加透明度。值为 0% 则使图像完全透明,值为 100% 则图像无变化。
在这里插入图片描述

filter: saturate(200%),改变图像饱和度,超过 100% 则增加饱和度。
在这里插入图片描述

你可能感兴趣的:(css,前端,vue.js,javascript,css3)