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

xiaoxiao2023-07-05 168

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

#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，这样背景才能固定到某个位置。

#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); }

当然，你仍然需要调整伪元素背景的尺寸和位置，使其完全覆盖父级容器。

下面是CodePen上的相关实例：

https://codepen.io/SitePoint/pen/Ngpvwx

这种方法支持所有标准浏览器、edge、IE9~IE11。在IE8中不会有任何变形样式，但是背景图仍然显示。

IE6和IE7不支持伪元素，因此背景图不会显示。然而，为了支持那些古老的浏览器，你可以直接给容器设置背景图而不是用先进的选择器或者一定条件的CSS将容器的背景设置为空。

大量创造性的应用都用到了CSS3的变形属性。您有相关分享吗？

本文为翻译作品，原文来自sitepoint，作者Craig Buckler。原文地址：https://www.sitepoint.com/css3-transform-background-image/

查看公众号文章

欢迎关注个人公众号，查看更多好文。