Question

我已经尝试了两天，以使背景img对移动设备做出响应。这是一个很长的主页（大约8000px）。整个页面的内容有一个div父“background_div”。我已经尝试了两个，大小覆盖或包含标签，img克服了pixaleted，就像它会放大，内容是响应，但背景img让我头疼。我需要它来识别设备宽度，缩小并保持固定而不是沿着8000px长页面延伸。任何人都可以在这里给我一个想法吗？

#background_div {
	background-image: url('home.jpg');
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}

/*It just won't scale to the divice width and height*/

<div id="background_div">

Answer 1

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

将这些设置为封面将拉伸图像以适应容器，无论它有多大。这就是导致你伸展的原因。

如果您希望图片保留原始大小，请将它们设置为自动，或者根本不设置它们。

Answer 2

<强> CSS2

如果您需要将图像放大，则必须在图像编辑器中编辑图像本身。

如果您使用img标签，您可以更改尺寸，但如果您需要将图像作为其他内容的背景（并且它不会像您希望的那样重复），那么这将无法获得所需的结果...

CSS3释放权力

这可以在CSS3中使用background-size。

所有现代浏览器都支持此功能，因此除非您需要支持旧版浏览器，否则就可以使用它。

支持的浏览器：

Mozilla Firefox 4.0+（Gecko 2.0+），Microsoft Internet Explorer 9.0 +，Opera 10.0 +，Safari 4.1+（webkit 532）和Chrome 3.0 +。

#background_div {
    /* width: will stretch to width / height of element */
    background-size: 100% 100%;
}

如何为一个长页面网站制作CSS响应背景img

2 个答案: