拉伸和缩放 CSS 背景 [英] Stretch and scale CSS background

问题描述

有没有办法在 CSS 中获取背景以拉伸或缩放以填充其容器?

Is there a way to get a background in CSS to stretch or scale to fill its container?

推荐答案

对于现代浏览器，您可以使用 background-size:

For modern browsers, you can accomplish this by using background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover 表示垂直或水平拉伸图像，使其永远不会平铺/重复.

cover means stretching the image either vertically or horizontally so it never tiles/repeats.

这适用于 Safari 3(或更高版本)、Chrome、Opera10+、Firefox 3.6+ 和 Internet Explorer 9(或更高版本).

That would work for Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9 (or later).

要使其与较低版本的 Internet Explorer 一起使用，请尝试以下 CSS:

For it to work with lower verions of Internet Explorer, try these CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

这篇关于拉伸和缩放 CSS 背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！