css背景图像属性_如何将CSS3转换应用于背景图像

css背景图像属性

CSS transformations are great, but they don’t (yet?) apply to background images. This article presents a workaround for those times when you really do want to rotate a background image, or to keep a background image fixed while its container element is rotated.

CSS转换很棒，但是还不能(但？)应用于背景图像。 本文为您确实要旋转背景图像或在旋转其容器元素时保持背景图像固定的情况提供了一种解决方法。

This article was updated in 2020. For more advanced CSS knowledge, read our book, CSS Master, 2nd Edition.

本文已于2020年更新。有关更高级CSS知识，请阅读我们的书籍CSS Master，第二版 。

Scaling, skewing, and rotating any element is possible with the CSS3 transform property. It’s supported in all modern browsers without vendor prefixes.

使用CSS3 transform属性可以缩放，倾斜和旋转任何元素。 所有没有供应商前缀的现代浏览器均支持该功能 。

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

Great stuff. However, this rotates the whole element — its content, border and background image. What if you only want to rotate the background image? Or what if you want the background to remain fixed while the content is rotated?

好东西。 但是，这将旋转整个元素-它的内容，边框和背景图像。 如果只想旋转背景图像怎么办？ 或者，如果您希望背景在旋转时保持固定，该怎么办？

There’s no W3C CSS proposal for background-image transformations. It would be incredibly useful, so perhaps one will appear eventually, but that doesn’t help developers who want to use similar effects today.

没有用于background-image转换的W3C CSS提案。 这将是非常有用的，因此也许最终会出现，但这对今天想要使用类似效果的开发人员没有帮助。

One option would be to create a new background image from the original, say rotated by 45 degrees. This could be achieved using:

一种选择是从原始图像创建新的背景图像，例如旋转45度。 可以使用以下方法实现：

1. a server-side image manipulation process
   服务器端图像处理过程

2. a client-side canvas-based image handling code, or

   基于客户端canvas的图像处理代码，或

3. APIs provided by some image-hosting CDN services.
   一些图像托管CDN服务提供的API。

But all these require additional effort, processing, and costs.

但是所有这些都需要额外的精力，处理和成本。

Fortunately, there’s a CSS-based solution. In essence, it’s a hack which applies the background image to a ::before or ::after pseudo element rather than the parent container. The pseudo element can then be transformed independently of the content.

幸运的是，有一个基于CSS的解决方案。 从本质上讲，这是一种将背景图像应用于::before或::after伪元素而不是父容器的技巧。 然后可以独立于内容来转换伪元素。

仅变换背景 (Transforming the Background Only)

The container element can have any styles applied, but it must be set to position: relative, since our pseudo element will be positioned within it. You should also set overflow: hidden unless you’re happy for the background to spill out beyond the confines of the container.

容器元素可以应用任何样式，但是必须将其设置为position: relative ，因为我们的伪元素将位于其中。 您还应该将overflow: hidden设置为overflow: hidden除非您对背景溢出超出容器范围感到高兴。

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

We can now create an absolutely positioned pseudo element with a transformed background. The z-index is set to -1 to ensure it appears below the container’s content:

现在，我们可以创建一个具有转换背景的绝对定位的伪元素。 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;
  transform: rotate(30deg);
}

Note that you may need to adjust the pseudo element’s width, height and position. For example, if you’re using a repeated image, a rotated area must be larger than its container to fully cover the background.

请注意，您可能需要调整伪元素的宽度，高度和位置。 例如，如果您使用的是重复图像，则旋转区域必须大于其容器才能完全覆盖背景。

将背景固定在变换后的元素上 (Fixing the Background on a Transformed Element)

All transforms on the parent container are applied to pseudo elements. Therefore, we need to undo that transformation. For example, if the container is rotated by 30 degrees, the background must be rotated -30 degrees to return to its original position:

父容器上的所有转换都将应用于伪元素。 因此，我们需要取消该转换。 例如，如果容器旋转了30度，则背景必须旋转-30度才能返回到其原始位置：

#myelement {
  position: relative;
  overflow: hidden;
  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;
  transform: rotate(-30deg);
}

Again, you’ll need to adjust the size and position to ensure the background adequately covers the parent container.

同样，您需要调整大小和位置，以确保背景足够覆盖父容器。

Here are the relevant demos live on CodePen:

以下是CodePen上的相关演示：

See the Pen CSS3 Transforms on Background Images by SitePoint (@SitePoint) on CodePen.

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

The effects work in all major browsers and Internet Explorer back to version 9. Older browsers are unlikely to show transformations but the background should still appear.

该效果在所有主流浏览器和版本9的Internet Explorer中均可使用。较旧的浏览器不太可能显示转换，但背景仍应显示。

翻译自: https://www.sitepoint.com/css3-transform-background-image/

css背景图像属性