Question

<body>
<div>
    <div class="page1">
    </div> 
</body>
.page1{
background-image:url(../images/1.jpg);
background-size:cover;
background-position:center; 
width:100%;
height:100%;
display:block;
position:relative;
 }

这是我为网页设置背景图片的代码，但遗憾的是它没有显示。有人可以帮我纠正这段代码吗？

Answer 1

背景未显示，因为您的div需要内容。 2个选项：您可以设置身体的背景。

body{
    background-image:url(../images/1.jpg);
}

或者将div的高度设置为图像的高度

Answer 2

首先，您需要结束</div>

<div>
    <div class="page1"></div>
    </div>

现在的问题是你的<div class="page1"></div>是空的。你需要在里面放一些元素才能显示图像。

DEMO

Answer 3

好的我现在明白了，你需要做

html, body{
    height: 100%;
    width: 100%;
}

Answer 4

也许你的HTML文档格式不正确。

试试这个：

<html>
<head>
<-- style block have to be contained within a <style> tag -->
<style>
    .page1{
        background-image:url(../images/1.jpg);
        background-size:cover;
        background-position:center; 
        width:100%;
        height:100%;
        display:block;
        position:relative;
     }
</style>
</head>
<body>
<div>
    <div class="page1">
    </div>
</div> <-- this tag was missing in your question -->
</body>

第二种可能性，您的图像没有正确链接。它的编写方式，它位于与html文档所保持的文件夹“图像”平行的文件夹中。因此，找出文档与图像之间存在的相关性，并尝试修改它的源 url（../ images / 1.jpg）; 。

Answer 5

在定义另一个对象的路径时，我发现使用〜/ f1 / f2 / file定义文件路径比使用../f1/f2/file尝试使用当前目录更容易。〜表示从顶级目录开始并沿文件结构向下工作。更容易。

背景图像未以html格式显示

5 个答案: