如何在背景图片上应用CSS3变形

2017-06-26阅读(2332)评论(0)牵着狗狗看MM

W3Cways.com 微信公众号


利用CSS3的 transform属性可以对元素进行缩放,倾斜和旋转。在任何现代浏览器上都可以实现。如果你需要支持Blackberry浏览器和Android的UC浏览器的话,则需要加-webkit-前缀,例如:

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

但是,这会旋转整个元素包括元素的内容、边框和背景图像。如果你只想旋转背景图像怎么办?或者,如果您希望在旋转元素的时候,背景保持不动的时候怎么办呢?
目前,没有关于背景图像变型的W3C支持。这将是非常有用的,所以我怀疑最终会支持的,但这并不能帮助今天想使用这个效果的开发人员。
幸运的是,有一个解决办法。本质上,它是将背景图像应用于伪元素之前或之后,而不是父容器。然后伪元素可以单独变形。

只变形背景图片

容器元素可以使用任何样式,但必须将其设置为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);
}

同样,您需要调整大小和位置,以确保背景充分覆盖父容器。

Demo

支持现代浏览器及IE9以上。IE8将不显示变形,但背景会显示。

英文原文链接:https://www.sitepoint.com/css3-transform-background-image/

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 如何在背景图片上应用CSS3变形
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!