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

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

#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.

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

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.

## 仅变换背景 (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.

#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:

#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:

#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:

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

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.

css背景图像属性

• 0
点赞
• 0
评论
• 0
收藏
• 扫一扫，分享海报

08-12 484
04-09 419
05-03 2184
08-04 1194
08-03 1415
10-06 3040
04-06
03-30 1678