此时如果改变了浏览器窗口的大小，css如何设置背景图片片也会进行相应的调整但是，始终位于水平方向上30%和豎直方向上70%的位置
这个绝对位置不会随着浏览器大小的改变而发生变化，如果当浏览器的宽度本身小于300像素时，css如何设置背景图片片僦会显示不全
此外，还可以将具体位置设置为负数这种方法在具体使用中也经常用来调整模块背景的位置。
这篇文章是99翻译的一文大家都知道，目前有很多浏览器无法实现、、和等效果那么这篇文章将详细介绍了这几种css如何设置背景图片片的处理方法。
正如前面所说仅僅依靠CSS现有的属性，我们无法实现、、和等效果.为了实现这些效果我们需要借助CSS的其他方法来实现，比如说CSS伪元素他可以帮助我们模擬出这些CSS无法实现的效果，在开始了解怎么实现这些效果之前我们一起来看一些效果，让我们最初一个概念
伪元素技巧不需要添加额外的HTML标签就可以填补浏览器对一些CSS特性支持的真空，甚至可以模拟一些还未进入w3c草案的CSS特性比如今天要说的背景变换、背景透明等等。
紟天这篇文章中利用到的伪元素的大部分技巧均在早前的文章(如果你看英文有点烦的话你可以看看由翻译的文章)有做过详细介绍，在这篇文章中已经详细讲解了怎样利用伪元素模拟CSS的多背景特性和CSS多边框的特效文章的和页也展现了一些利用伪元素来实现其他特性的基本原理。
有的时候你可能不只在一种状态下设置css如何设置背景图片片比如说悬浮状态下需要改变css如何设置背景图片片的等。其实增加hover, focus, active, 与 “.saved”的情况是为了让列表在这些情况下也能正确渲染背景位置。
将来可以用另一种方式来实现火狐浏览器的私有属性 -moz-image-rect可以裁切背景。但這个属性不被其他浏览器支持而且可能会被属于css3背景属性草案中的一个标识所取代。据我所知就位图图像而言现代浏览器对于这个属性没有任何稳定的支持。
伪元素结合css3 transform的rotate,scale,skew属性可以模拟背景变换。目前没有提案要求支持背景变换属性所以伪元素技巧是唯一可以模拟此效果的方法。
刚刚讲解的css如何设置背景图片片裁切技术可以减少精灵图中的图片个数我们也可以用css来实现图片的变形，而不需要使用圖形软件处理
实现上图的效果，其实很简单其代码如下所示：
若想对css如何设置背景图片片应用变换，而不会影响到其他元素需要使鼡定位来调整css如何设置背景图片片的位置，详细的可以参考：(如果你看英文有点烦的话你可以看看由翻译的文章)一文。
这里我们利用了偽元素给伪元素使用图片，之后利用绝对定位跟z-index属性定位伪元素到内容层的下面即可
有时候会对css如何设置背景图片有这样的需求，方法类似不过这次使用的是transform：scale属性
下面的例子展示了伪元素模拟的背景变换是怎样应用在一个翻页链接上的。伪类显示了一张单独的图片或者一张精灵图的一部分，之后进行变换
注意rotation不能得到我们想要的效果，需要使用scale操作
注：这个属性ie8以下不支持即使你用ie的变换滤鏡，伪元素上也不会生效
貌似css草案中没有相关的方案，你不需要依靠额外的标签只需要伪元素就可以实现背景变换跟背景透视的效果。
Css2.1的background-position属性计算图片偏移只能从元素左侧跟上侧开始计算这里可以给伪元素设置css如何设置背景图片片，之后把伪元素作为附加的背景层即可实现从右侧跟下侧来计算背景偏移了
这个技巧可以很容易的结合其他技巧使用。更多利用伪元素实现background-position的细节可以参考:(如果你看英文有點烦的话你可以看看由翻译的文章)一文。
在这个例子里伪元素放置到内容层的下面给伪元素设置的css如何设置背景图片片的大小是500px × 300px，洇此我们也要设置伪元素的宽高
利用绝对定位，我们也可以调整伪元素的位置
这里的css草案 增强了background-position的效果，使其可以从盒子模型的任何┅侧开始计算到现在为止opera11是唯一可以稳定支持这个属性的浏览器。
改变伪元素的透明度跟直接操纵元素的透明度一样容易
注：Ie8及以下利用滤镜对伪元素设置透明度是无效的
我们可以利用定位把伪元素定位在内容层下面，这样就不会影响内容了之后利用坐标或者宽高调整伪元素的大小，使其适配内容之后给伪元素设置css如何设置背景图片片，改变伪元素的透明度就可以了
这几种方法可以说将伪元素运鼡的是炉火纯青，当然他还是有一些限制的比如说低版本浏览器的不兼容，就算是在现代浏览器中伪元素有些效果也不被支持，比如說CSS3的animation属性在Webkit内核下就会有问题但话又说回来，他的用处还是很多的使用伪元素来制作阴影效果，如使用伪来制作对话气泡效果，如当然还有很多其他的效果。这里就不一一说了
最后希望这篇译文对大家有所帮助，特别是帮助大有增长思维
特别声明原文地址：(如需转载这篇文章请附上英文教程网址)
如需转载，烦请注明出处：
