何给背景图像使用CSS3变形

wolaizheli 2017-06-28

摘要: 如何给背景图像使用CSS3变形呢?在这里,Craig Buckler给出了答案。

CSS3的transform属性可以缩放、倾斜和旋转任何元素。在没有任何浏览器前缀的前提下,这个属性已经被所有的现代浏览器所支持。如果想支持黑莓浏览器和安卓版的UC浏览器,你就需要添加-webkit-前缀了。

 

#myelement{
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);

}
何给背景图像使用CSS3变形何给背景图像使用CSS3变形

 

 

完美!然而,当你使用上述代码时,你会发现元素的内容、边框、背景图片都会发生旋转。那么,怎样才能只旋转背景图片呢?怎样才能只让元素本身旋转,而让其背景图片位置固定呢?

 

 

目前,W3C还没有专门变形背景图片的属性。我相信在不久的将来肯定会出现这个非常实用的属性。但是对于现在想实现相同效果的开发者们来说毫无帮助。

 

万幸,这里有个解决方法。其实,就是一个给父级容器元素before伪元素或者after伪元素添加背景图片的hack。这时,我们就可以独立控制带有背景图片伪元素的变形。

 

只变形背景

为了控制伪元素在其父级容器内定位,其父级容器元素必须设置相对定位(position:relative)。为了防止背景溢出,你也需要给容器元素设置overflow:hidden;

 

#myelement{
  position: relative;
  overflow: hidden;

}
何给背景图像使用CSS3变形何给背景图像使用CSS3变形



 

现在,我们来创建一个具有可以变形背景的绝对定位的伪元素。将伪元素的层级设置为-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);

}
何给背景图像使用CSS3变形何给背景图像使用CSS3变形



 

注意,你需要调整伪元素的宽度、高度和定位。比如,当你使用重复图片做背景时,旋转的区域必须比其所在容器面积大,以此保证全部覆盖容器背景。

 

何给背景图像使用CSS3变形

 

固定一个变形元素的背景

父级容器上的所有变形样式都会继承到其伪元素。因此,我们需要撤销其伪元素的变形样式。例如,如果容器旋转30deg,其伪元素背景必须旋转-30deg,这样背景才能固定到某个位置。

何给背景图像使用CSS3变形​​​​​​​

原文链接

相关推荐