android.9背景图变形,如何在背景图片上应用CSS3变形

利用CSS3的 transform属性可以对元素进行缩放，倾斜和旋转。在任何现代浏览器上都可以实现。如果你需要支持Blackberry浏览器和Android的UC浏览器的话，则需要加-webkit-前缀，例如：

[css]#myelement {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

[/css]

但是，这会旋转整个元素包括元素的内容、边框和背景图像。如果你只想旋转背景图像怎么办？或者，如果您希望在旋转元素的时候，背景保持不动的时候怎么办呢？

目前，没有关于背景图像变型的W3C支持。这将是非常有用的，所以我怀疑最终会支持的，但这并不能帮助今天想使用这个效果的开发人员。

幸运的是，有一个解决办法。本质上，它是将背景图像应用于伪元素之前或之后，而不是父容器。然后伪元素可以单独变形。

只变形背景图片

容器元素可以使用任何样式，但必须将其设置为position:relative，因为我们的伪元素会在里面。您还应该设置overflow: hidden。

[css]#myelement {

position: relative;

overflow: hidden;

}

[/css]

现在我们可以创建一个绝对位置的具有可变形背景的伪元素。z-index设置为1以确保它出现在容器的内容。

[css]

#myelement:before {

content: "";

position: absolute;

width: 200%;

height: 200%;

top: -50%;

left: -50%;

z-index: -1;

background: url(background.png) 0 0 repeat;

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

[/css]

注意，您可能需要调整伪元素的宽度、高度和位置。例如，如果使用重复的图像，旋转区域必须大于其容器，以便完全覆盖背景：

在变形的元素上固定背景

父容器上的所有变形都应用到伪元素上。因此，我们需要取消这个变形，例如，如果容器旋转30度，则背景必须旋转30度才能返回到固定位置：

[css]#myelement {

position: relative;

overflow: hidden;

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

#myelement:before {

content: "";

position: absolute;

width: 200%;

height: 200%;

top: -50%;

left: -50%;

z-index: -1;

background: url(background.png) 0 0 repeat;

-webkit-transform: rotate(-30deg);

transform: rotate(-30deg);

}

[/css]

同样，您需要调整大小和位置，以确保背景充分覆盖父容器。

支持现代浏览器及IE9以上。IE8将不显示变形，但背景会显示。

英文原文链接：https://www.sitepoint.com/css3-transform-background-image/