Question

我想使用样式表在html页面上的DIV中设置背景图像。

我的css文件：

#MyDiv {
background-image: url('Images/prechod.png');
background-repeat: repeat-x;
height: 400px;
}

我的页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="Css/StyleSheet1.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div id="MyDiv">
    </div>
</body>
</html>

我也试过这个并且它有效。

<body>
    <div style="height: 400px; background-image: url('Images/prechod.png'); background-repeat: repeat-x">

    </div>
</body>

但我想在css文件中包含所有内容。我希望这很简单，有人会帮助我。

Answer 1

css文件中的路径是相对于CSS文件的位置而不是HTML文件。

您可能只需要相应地更改CSS - 例如，如果您的css文件相对于HTML文件位于Css/StyleSheet1.css，只需将其更改为：

#MyDiv {
    background-image: url('../Images/prechod.png');
    background-repeat: repeat-x;
    height: 400px;
}

如果它不是路径问题，很可能你有一些更高特异性的其他样式覆盖CSS文件中的#myDiv声明（例如body #myDiv { background: none }或类似的东西）。这可以解释为什么它作为内联样式（因为它们具有最高的特异性）而不是在样式表中。然而，基于你开始的路径不正确的事实，我怀疑这是罪魁祸首。

Answer 2

background-image: url('../Images/prechod.png');

必须相对于css

设置路径

Answer 3

CSS中的相对路径，然后在那里添加：

/**  CSS  **/
#MyDiv { url('../Images/prechod.png') repeat-x; height: 400px; }

CSS：使用CSS设置背景图像

3 个答案: