您的位置：首页 > Web前端 > CSS

CSS镂空图片处理

2016-06-30 13:05 489 查看

来源：http://www.zhangxinxu.com/wordpress/?p=5267，分享收藏

使用镂空图片，通过CSS改变颜色，达到图片切换的效果，可以同过背景图，然后改变背景色，从而达到图片换色的目的，在换色的过程中可以过渡

下面是使用背景色

<style type="text/css">
li{display:inline-block;}

.icon{display:block;height:140px;width: 140px;background-color:#000;overflow: hidden;transition:all 0.5s;}
.icon{
background-image: url(img/test1.png);
}
.icon2{background-position: 0 -140px;}
.icon3{background-position: 0 -280px;}
.icon4{background-position: 0 -420px;}
.icon:hover{background-color: #ccc;}
</style>
</head>
<body>
<ul id='test'>
<li>
<i class="icon icon1"></i>
</li>
<li>
<i class="icon icon2"></i>
</li>
<li>
<i class="icon icon3"></i>
</li>
<li>
<i class="icon icon4"></i>
</li>
</ul>
</body>

可以达到换色的效果，但是在初始加载的时候会有下面这个问题

加载完成前会是这样

后面张大神提出用伪类选择器，content，加载图片解决这个问题，下面代码：

<style type="text/css">
li{display:inline-block;}
.icon:after{content: url(img/test1.png);position:relative;cursor: pointer;transition:all .5s;}
.icon{display:block;height:140px;width: 140px;background-color:#000;overflow: hidden;}
.icon2:after{top:-140px;}
.icon3:after{top:-280px;}
.icon4:after{top:-420px;}
.icon:hover{background-color: #ccc;}
</style>
</head>
<body>
<ul id='test'>
<li>
<i class="icon icon1"></i>
</li>
<li>
<i class="icon icon2"></i>
</li>
<li>
<i class="icon icon3"></i>
</li>
<li>
<i class="icon icon4"></i>
</li>
</ul>
</body>

就不会出现这样的问题

代码地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航