css - 在 CSS 中拉伸小背景图像

Question

我在理解 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%;}

score 1 · Accepted Answer

这个功能刚刚用 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=""/>

在您的内容的背景中。

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

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

3 回答 3