Question

下面的css代码有什么问题：

body {
    background-image: #000 url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg) repeat;
    color: #898989;
    font-family: 'Roboto', Arial, Verdana;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    font-size:13px;
    line-height:21px;
}

尝试了以下变化，但仍无效：

background-image: #000 url("http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg") repeat;
background-image: #000 url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg') repeat;
background-image: url("http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg") repeat;
background: url("http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg") repeat;
background: url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg) repeat;

Answer 1

The background-image property只接受一个参数：图像的URL。

您将其与the background shorthand property混淆，后者会获取值列表并将其应用于各种不同的完整属性（包括background-image，background-color和background-repeat）。< / p>

Answer 2

如果您正在使用背景属性，则可以同时使用颜色和图像，但如果您使用背景图像属性，则无法使用图像颜色，您和＃39;只使用图像，而不是使用单独属性的颜色，如下所示：

body {
    background-color: #000;
    background-image: url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg');

}

或两个属性组合在单个背景属性中，如下所示

body {
    background: #000 url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg');

}

Answer 3

仅使用background属性：

body {
background: #000 url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg) repeat;
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}

Jsfiddle - example

Answer 4

删除＃000并重复：）

body {
background-image: url(http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg);
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}

JSFiddle

Answer 5

首先你需要摆脱重复。并在

之后添加

background-repeat:repeat-y;

然后确保网址是单引号。

body {
background-image: #000 url('http://www.lifecaredirect.com/images/background-patterns/body-bg-36.jpg');
background-repeat:repeat-y;
color: #898989;
font-family: 'Roboto', Arial, Verdana;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-size:13px;
line-height:21px;
}

css中的background-image无法正常工作

5 个答案: