Question

我有这张图片：

enter image description here

我正在尝试将其添加到网页作为背景图片 - 仅用于测试目的。

我设置了最简单的HTML文件：

<!DOCTYPE html> 
<html lang="en">
<head> 
    <title>
        My CSS Test Page
    </title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/mycss.css">
</head>
<body>
<h1>Hello World!!</h1>
</body>
</html>

然后将其与此css：

相关联

body {
    background-image: url("trail.jpg");
}

而且......它不起作用。

然后我用单引号尝试它，然后没有引号..仍然是同样的问题。什么都没有出现。然后我想也许这个形象有点腐败或什么的。所以我添加了一个img标签：

<!DOCTYPE html> 
<html lang="en">
<head> 
    <title>
        My Css Test Page
    </title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/mycss.css">
</head>
<body>
<h1>Hello World!!</h1>
<img src="trail.jpg">
</body>
</html>

显示没有任何问题。

然后我想可能是一个链接问题。所以我嵌入了css：

<!DOCTYPE html> 
<html lang="en">
<head> 
    <title>
        My Css Test Page
    </title>
    <style>
    body {
        background-image: url("trail.jpg");
    }
    </style>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/mycss.css">
</head>
<body>
<h1>Hello World!!</h1>
<img src="trail.jpg">
</body>
</html>

没有运气。

那我错过了什么？

Answer 1

您可能需要考虑在css中提供包含此图像的文件夹的路径 -

body { background-image: url('../img/test.jpg'); }

什么会导致css background-image属性不显示图像，而HTML <img/>将显示它没有问题？

1 个答案: