网站设计如何将CSS3 transform应用于背景图像

CSS转换非常酷,但它们还不适用于背景图像。本文提供了一个巧妙的解决方法,适用于您确实想要旋转背景图像,或在其容器元素旋转时保持背景图像固定的那些时间。 有兴趣像专业人士那样掌握CSS3吗?Tiffany Brown的CSS Master可以下载到所有SitePoint Premium会员。或者,您只需19美 WP网站建设

CSS转换非常酷,但它们还不适用于背景图像。本文提供了一个巧妙的解决方法,适用于您确实想要旋转背景图像,或在其容器元素旋转时保持背景图像固定的那些时间。

有兴趣像专业人士那样掌握CSS3吗?Tiffany Brown的CSS Master可以下载到所有SitePoint Premium会员。或者,您只需19美元就可以获得该书的副本。

使用CSS3 transform属性可以缩放,倾斜和旋转任何元素。它在所有没有供应商前缀的现代浏览器中都受支持。(我已添加,-webkit-以防万一你想支持一些旧的浏览器。)

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

好东西。但是,这会旋转整个元素 – 其内容,边框和背景图像。如果您只想旋转背景图像怎么办?或者,如果您希望在旋转元素时背景保持固定,该怎么办?

目前,没有针对背景图像转换的W3C提议。这将是非常有用的,所以我怀疑最终会出现一个,但这对今天想要使用类似效果的开发人员没有帮助。

幸运的是,有一个解决方案。从本质上说,它是其中背景图像适用于一劈beforeafter伪元件而不是父容器。然后可以独立地转换伪元素。

仅转换背景

容器元素可以应用任何样式,但必须设置为position: relative,因为我们的伪元素将定位在其中。你也应该设置,overflow: hidden除非你很高兴背景溢出容器。

#myelement {
position: relative;
overflow: hidden;
}

我们现在可以创建一个具有转换背景的绝对定位的伪元素。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转换背景

在变换后的元素上修复背景

父容器上的所有转换都应用于伪元素。因此,我们需要撤消该转换,例如,如果容器旋转30度,背景必须旋转-30度才能返回固定位置:

#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上的相关演示:

请参阅CodePen上SitePoint(@SitePoint)的背景图像上的Pen CSS3转换。

效果适用于所有主流浏览器以及Edge和Internet Explorer中的版本9. IE8不会显示任何转换但仍会显示背景。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/10740

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code