经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
通过css改变svg img的颜色
来源:cnblogs  作者:友人_Z  时间:2019/1/9 9:28:06  对本文有异议

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

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

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

代码如下:

  1. <section>
  2. <div className={styles.image}>
  3. <img src={item.icon} alt="Advantage" />
  4. </div>
  5. <p>{item.line1}</p>
  6. <p>{item.line2}</p>
  7. </section>

 

  1. section{
  2. .image{
  3. display: inline-block;
  4. overflow: hidden;
  5. }
  6. img{
  7. position: relative;
  8. left: 0;
  9. margin-bottom: .1rem;
  10. filter: drop-shadow(#ffffff 80px 0);
  11. }
  12. &:hover{
  13. background-color: gray;
  14. img{
  15. left: -80px;
  16. }
  17. }
  18. }

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

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

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号