<ul>
<li class="ico1"></li>
<li class="ico2"></li>
<li class="ico3"></li>
<li class="ico4"></li>
</ul>
<style type="text/css">
.ico1{
background: url(huise-ico1)
}
.ico1:hover{
background: url(chengse-ico1)
}
</style>
这边我只写了一个。还有3个没写。你可以根据这个改上自己需要的。
PS:还有一种跟快捷的方法,如果你有兴趣的话,可以去搜索下iconfont。不懂可以再问我
问题原因:该部分svg图标带有fill属性,不能直接通过css 修改fill属性。解决思路:一、移除默认颜色(去色操作);二、利用CSS3滤镜filter中的属性drop-shadow。
要使用标准的 css3 实现某元素的投影效果,有两个方法,第一个就是使用常见的 box-shadow ,第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。
所以:
通通不行,实现遇到了巨大的阻碍。
后来想,如果我实体部分也在可视区域内,但是是透明的,会怎样呢(反正不会有投影出来)
于是,就尝试了经常带来意外惊喜的透明边框,结果是可喜的
因此,下面这一个 css 声明式千万不能少的:
关于兼容性
IE13+ 支持,Chrome 和 FireFox 浏览器支持,移动端 ios 支持,Android 4.4+ 支持。也就是,基本上,移动端现在可以使用这种技术了。
另: