如何为长单页网站制作 CSS 响应式背景图片

Question

我已经尝试了两天让背景 img 响应手机。这是一个长主页（大约 8000 像素）。整个页面的内容有一个 div 父级 "background_div"。我都试过了，大小覆盖或包含标签，img 变得过像素化，就像它会被放大一样，内容是响应式的，但背景 img 让我头疼。我需要它来识别设备宽度、缩小并保持固定而不是沿着 8000 像素长的页面拉伸。谁能告诉我这里出了什么问题？

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

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

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

Answer 2

CSS2

如果您需要使图像变大，您必须在图像编辑器中编辑图像本身。

如果您使用 img 标签，您可以更改大小，但如果您需要图像作为某些其他内容的背景（并且它不会像您看起来那样重复自己），那将不会给您想要的结果想要）...

CSS3释放力量

这可以在 CSS3 中使用背景大小来完成。

所有现代浏览器都支持此功能，因此除非您需要支持旧浏览器，否则这就是实现方式。

支持的浏览器：

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 响应式背景图片

How to make a CSS responsive background img for a long one page website

html

css

background-image

responsive-design

responsive-images