1

我已经尝试了两天，以使背景 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">

4

2 回答 2

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

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

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

于 2016-02-04T22:54:47.653 回答
0

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%;
}
于 2016-06-29T02:19:52.860 回答