在 CSS 中拉伸小背景图像答案

【问题标题】：Stretching a small background image in CSS在 CSS 中拉伸小背景图像
【发布时间】：2013-04-25 22:54:50
【问题描述】：

我在理解 CSS 中缩放或展开图像的正确语法时遇到问题。

我尝试了很多东西，但我无法让它正常工作。

我目前使用的代码是

background:url(../images/body_bg1.jpg) fixed repeat-y; width:100%; height:100%;}

当前使用上面的代码，当我使用repeat-y 时，图像平铺在页面的左侧，它平铺在页面的顶部。

根据我的阅读，我应该能够使用上面的语法来固定和拉伸我的图像我在这里遗漏了什么吗？

同样使用上面的代码，可以这样格式化代码以便更容易阅读吗？

background:url(../images/body_bg1.jpg) fixed repeat-y; 
width:100%; 
height:100%;}

【问题讨论】：

【解决方案1】：

这个功能刚刚用 css3 实现。所以它不会在稍微旧的浏览器中运行。

div
{
background-image:url('myBG.jpg');
background-repeat:no-repeat;
background-size:cover;
}

看看这个网站。如果你问我，它是一个非常酷的网站。 http://www.w3schools.com/cssref/css3_pr_background-size.asp

编辑：在旧浏览器中，如果没有通常的解决方法，这是不可能的

<image src=""/>

在您的内容的背景中。

【讨论】：

太棒了！效果很好。我查看了该站点上的所有其他页面，但不知何故我错过了那个。由于这是一项新功能，旧浏览器会发生什么。我可以谷歌它，但我想你可能有答案:) 谢谢你的帮助
还要使图像固定或静态，我是否在您提供的语法中的某处使用固定？
它将忽略封面并以原始尺寸显示图像一次，因为在旧浏览器中实现了无重复。
自己在 w3schools 中检查可能的背景属性。阅读它们，你就会得到你的概述。它可能已经修复了，我不知道“滚动”是否会起作用。
感谢您的帮助，我现在了解更多了

【解决方案2】：

实际上，要拉伸背景，您必须在元素中指定宽度和高度或使用包含：

div
{
background-image:url('image.png');
background-repeat:no-repeat;
background-size:100% 100%;
/*background-size:contain;*/
}

使用封面会拉伸一侧并溢出另一侧

【讨论】：

啊，所以这是最好的方法，这是否与使用 % 而不是覆盖的旧浏览器兼容？
整个 background-size 属性是 CSS3，因此与旧版浏览器不兼容。大小问题是 css1 的一个众所周知的问题。因此，您遇到了多年来让 Web 开发人员感到不安的事情。
xeed 是对的。他的回答也是对的。使用百分比覆盖覆盖的区别在于，覆盖延伸一侧并溢出另一侧，而百分比控制两侧，因为您需要拉伸不适合，我认为您需要使用百分比或包含您必须全部测试并决定什么最适合您

【解决方案3】：

我认为你应该在这里使用 CSS background-size 属性：

background-size:[width] [height];
background-repeat:repeat-y;

如果您只提供一个值，第二个值将设置为 auto。

【讨论】：