何给背景图像使用CSS3变形
摘要： 如何给背景图像使用CSS3变形呢？在这里，Craig Buckler给出了答案。
#myelement{
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
完美！然而，当你使用上述代码时，你会发现元素的内容、边框、背景图片都会发生旋转。那么，怎样才能只旋转背景图片呢？怎样才能只让元素本身旋转，而让其背景图片位置固定呢？
目前，W3C还没有专门变形背景图片的属性。我相信在不久的将来肯定会出现这个非常实用的属性。但是对于现在想实现相同效果的开发者们来说毫无帮助。
万幸，这里有个解决方法。其实，就是一个给父级容器元素before伪元素或者after伪元素添加背景图片的hack。这时，我们就可以独立控制带有背景图片伪元素的变形。
为了控制伪元素在其父级容器内定位，其父级容器元素必须设置相对定位(position:relative)。为了防止背景溢出，你也需要给容器元素设置overflow:hidden;
#myelement{
position: relative;
overflow: hidden;
}现在，我们来创建一个具有可以变形背景的绝对定位的伪元素。将伪元素的层级设置为-1(z-index:-1),保证其不遮盖内容。
#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);
}注意，你需要调整伪元素的宽度、高度和定位。比如，当你使用重复图片做背景时，旋转的区域必须比其所在容器面积大，以此保证全部覆盖容器背景。
父级容器上的所有变形样式都会继承到其伪元素。因此，我们需要撤销其伪元素的变形样式。例如，如果容器旋转30deg，其伪元素背景必须旋转-30deg，这样背景才能固定到某个位置。
相关推荐
冰蝶 2020-03-01
somboy 2020-02-29
zengni 2020-02-23
lanzhusiyu 2020-01-12
MaureenChen 2020-01-01
AlisaClass 2019-11-18
scssqly轩 2019-11-17
zengni 2019-10-27
懵懂听风雨 2015-11-12
ozhanjun 2019-09-08
沈宫新 2018-02-05
lanzhusiyu 2018-01-05
走向WEB开发 2017-09-18
buttonChan 2018-04-24
走向WEB开发 2018-02-18
css教程 2018-02-15
dangzhangjing 2019-07-01
yaodilu 2019-06-30