CSS正文背景图片问题

Question

好的，这一工作正常，海洋图片显示在背景中，但重复4次以填满整个屏幕。

<style type="text/css">
   body {background-image:url('ocean.png');}
</style>
<body>

</body>

然后更改为

body {background-image:url('ocean.png') no-repeat center center;}

现在，没有任何东西显示出背景图片。

Answer 1

由于background-image不能容纳更多参数-将其更改为background: url... ，这是将所有这些图像设置在一行中的正确属性。

body {background: url('ocean.png') no-repeat center center;}

Answer 2

尝试这种方式：

body {
background: url('ocean.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

Answer 3

这是您可以执行的操作，并将其拉伸到屏幕的整个高度/宽度（注意：如果比例不合适，则会发生一些变形）：

body {
background-image: url(ocean.png);
background-repeat: no-repeat;
background-size: 100%;
}

IIRC，background-size和能够在不带引号的情况下编写url（...）是CSS3标准的一部分。

Answer 4

您可以在background属性中调整背景图像的大小，如下所示：

背景：url（'ocean.png'）无重复顶部居中100％自动；

要么

背景大小：100％自动；

第一个参数用于宽度，第二个参数用于高度。 第一个示例将图像放在顶部居中并拉伸以使其宽度填充浏览器窗口，然后按比例设置高度。 您也可以使用“封面”代替“ 100％自动”，浏览器将以填充背景所需的任何方式填充图像。

注意：这是CSS3，因此背景大小属性仅适用于较新的浏览器，即IE9，Firefox 4等。