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

CSS转换非常酷,但它们还不适用于背景图像。本文提供了一个巧妙的解决方法,适用于您确实想要旋转背景图像,或在其容器元素旋转时保持背景图像固定的那些时间。 有兴趣像专业人士那样掌握CSS3吗?Tiffany Brown的CSS Master可以下载到所有SitePoint Premium会员。或者,您只需19美元就可以获得该书的副本。 使用CSS3 transform属性可以缩放,倾斜和旋转任何元素。它在所有没有供应商前缀的现代浏览器中都受支持。(我已添加,-webkit-以防万一你想支持一些旧的浏览器。) #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg); } 好东西。但是,这会旋转整个元素 – 其内容,边框和背景图像。如果您只想旋转背景图像怎么办?或者,如果您希望在旋转元素时背景保持固定,该怎么办? 目前,没有针对背景图像转换的W3C提议。这将是非常有用的,所以我怀疑最终会出现一个,但这对今天想要使用类似效果的开发人员没有帮助。 幸运的是,有一个解决方案。从本质上说,它是其中背景图像适用于一劈before或after伪元件而不是父容器。然后可以独立地转换伪元素。 仅转换背景 容器元素可以应用任何样式,但必须设置为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); } 请注意,您可能需要调整伪元素的宽度,高度和位置。例如,如果您使用的是重复图像,则旋转区域必须大于其容器才能完全覆盖背景: 在变换后的元素上修复背景 父容器上的所有转换都应用于伪元素。因此,我们需要撤消该转换,例如,如果容器旋转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不会显示任何转换但仍会显示背景。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站设计如何将CSS3 transform应用于背景图像
分享到:
赞(0)
广告位820*80