本篇文章主要介绍了" css背景图片的背景裁切、背景透明度、背景变换等效果运用"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
这篇文章是99翻译Nicolas Gallagher 的CSS background image hacks 一文。大家都知道，目前有很多浏览器无法实现背景裁切...
.actions a:before {
content:"";
float:left;
width:16px;
height:16px;
margin:0 5px 0 0;
background:url(sprite.png);
}
.save a:before {background-position:0 -16px;}
.delete a:before {background-position:0 -32px;}
.share a:before {background-position:0 -48px;}
.comment a:before {background-position:0 -64px;}
有的时候你可能不只在一种状态下设置背景图片，比如说悬浮状态下需要改变背景图片的等。其实，增加hover, focus, active, 与 “.saved”的情况是为了让列表在这些情况下也能正确渲染背景位置。
复制代码
代码如下:
.save a:hover:before,
.save a:focus:before,
.save a:active:before {background-position:-16px -16px;}
.saved a:before {background-position:-32px -16px;}
将来的替代方案
将来可以用另一种方式来实现。火狐浏览器的私有属性 -moz-image-rect可以裁切背景。但这个属性不被其他浏览器支持，而且可能会被属于css3背景属性草案中的一个标识所取代。据我所知就位图图像而言，现代浏览器对于这个属性没有任何稳定的支持。
模拟背景变换
伪元素结合css3 transform的rotate,scale,skew属性，可以模拟背景变换。目前没有提案要求支持背景变换属性，所以伪元素技巧是唯一可以模拟此效果的方法。
旋转背景图片
刚刚讲解的背景图片裁切技术可以减少精灵图中的图片个数。我们也可以用css来实现图片的变形，而不需要使用图形软件处理。
实现上图的效果，其实很简单，其代码如下所示：
复制代码
代码如下:
.accordion a:before {
content:"";
float:left;
width:16px;
height:16px;
margin:0 5px 0 0;
background:url(sprite.png) no-repeat 0 0;
}
.accordion.open a:before {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
若想对背景图片应用变换，而不会影响到其他元素，需要使用定位来调整背景图片的位置，详细的可以参考：Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有点烦的话，你可以看看由志哥翻译的文章使用css2.1实现多重背景、多重边框效果)一文。
这里我们利用了伪元素，给伪元素使用图片，之后利用绝对定位跟z-index属性定位伪元素到内容层的下面即可。
背景图片倒影效果
有时候会对背景图有这样的需求，方法类似，不过这次使用的是transform：scale属性
