html中的背景高度答案

【问题标题】：Background height in htmlhtml中的背景高度
【发布时间】：2014-11-14 19:59:39
【问题描述】：

我正在尝试在我的网站上设置一个新的 bg，但我无法让它工作。基本上我有一张图片（大小 50x2000 像素），我想创建重复的背景。在我使用的 CSS 中：

#test{
width: 50px;
height: 100%;
background:url(images/bg.png); 
background-repeat:repeat-x;
min-width: 100%;
position: absolute;
}

它部分工作，我可以看到 bg 重复但高度有问题。我的网络浏览器应该挤压图片的高度以适应网站中的整个图片，而现在我只能看到图片的顶部，这是因为图片高度太大了 2000 像素。那么我必须更改我的 CSS 代码以使 bg 适合我的网站？

谢谢

【问题讨论】：

使用 background-size 属性为 -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
不幸的是仍然不起作用。这是我想要实现的目标：oi62.tinypic.com/6dstis.jpg
这里有一个沟通问题——你似乎没有以回复的人可以清楚理解的方式描述你的问题，所以我建议你从你的问题中创建一个 JSfiddle 来说明问题。
好的，这是我的背景 jsfiddle.net/rpzguw4y/ 基本上我想把它放到屏幕上，所以如果你访问我的网站，你会看到一切，全貌，而不仅仅是背景的一部分，如果您访问源代码，您会看到图片比网站上的要大得多。

标签： html css background height

【解决方案1】：

将此添加到您的 CSS 中

height:2000px;

如：

#test{
width: 50px;
height: 2000px;
background:url(images/bg.png); 
background-repeat:repeat-x;
min-width: 100%;
}

它应该可以解决您的问题。

更新：这是Fiddle。您在小提琴中使用的图像是 900 像素，所以我将高度设置为 900 像素。我认为您的问题已经解决。如果不是，请详细说明您的问题。

问：为什么需要绝对位置？删除它。

【讨论】：

不幸的是仍然不起作用。这是我想要实现的目标：oi62.tinypic.com/6dstis.jpg
我更新了我的答案。请检查:)

【解决方案2】：

background-repeat:repeat-x; 应该是 background-repeat:repeat-y; 如果你想垂直做。 look听到

编辑，尝试删除那些绝对选项和其他选项，以便浏览器可以处理其余的：

#test{
background:url(images/bg.png); 
background-repeat:repeat;
}

【讨论】：

不幸的是仍然不起作用。这是我想要实现的目标：oi62.tinypic.com/6dstis.jpg
只留下选项：background:url(images/bg.png);背景重复：重复xy；让浏览器完成剩下的工作。在火狐上工作。只是为了确保检查其他浏览器。如果有些有问题，您可以将 repeat-xy 更改为 repeat-y。
我还是有同样的问题。看看这个jsfiddle.net/rpzguw4y/3 并检查原始图像的样子，它比结果框中的大得多
好吧，如果你明白我的意思jsfiddle.net/rpzguw4y/4，你只需要 background 和 background-repeat 属性来制作整个页面的背景，但你需要在 body 标签上使用它。位置标签会破坏您的背景。取消注释 #test 中的位置标记以了解我的意思。 ofc 如果您在 div 属性上使用背景，它仍然可以工作，但只能在 div 占用的空间上工作。

【解决方案3】：

将您的 CSS 更新为

#test
{
width: 50px;
height: 100%;
background:url(images/bg.png); 
background-repeat:repeat-x;
min-width: 100%;
position: absolute;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;
}

【讨论】：

不幸的是仍然不起作用。这是我想要实现的目标：oi62.tinypic.com/6dstis.jpg