一张图片分为2部分显示带有变换效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.d1 {
background-image: url(images/redhat.png);
}
.d2 {
background-image: url(images/redhat2.png);
}
.d3 {
background-image: url(images/redhat3.png);
}
.d4 {
background-image: url(images/redhat4.png);
}
.ad {
width: 220px;
margin-left: 10px;
height: 100px;
border: 1px solid gray;
opacity: 0.5; /*透明效果，1为不透明*/
-webkit-transition: all 0.2s ease-in 0;
float: left;
}
.ad:hover {
opacity: 1;
background-position: right center;
}
</style>
</head>
<body>
<div class="ad d1"></div>
<div class="ad d2"></div>
<div class="ad d3"></div>
<div class="ad d4"></div>
</body>
</html>
原文：http://www.cnblogs.com/lsr111/p/4414276.html