Question

作为我的第一个编码项目之一，我目前正在为小型Web服务器开发一个小的着陆页。我试图在CSS中添加背景图片，但它无法正常工作。我是CSS和HTML的新手，但已经迷失了几天！有人知道我该怎么做吗？

我的CSS：

@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Robo+Condensed');

html, body {
margin: 0;
padding: 0;
height: 100%
width: 100%
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(pexelsphoto.jpg) no-repeat 50% 50%;
}

我的HTML：

<html>
<head>
<title>First Server</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
    <div class="inner">
        <div class="content">
            <h1>JORDAN'S SERVER</h1></div>
            <a class="button" href="#">Click Me</a>
            <div>
                <img src="pexelsphoto.jpg">
            </div>
    </div>
</section>
<p>First full web server design made in July of 2018. This all holds my 
random stuff while I learn to code.</p>
</body>
</html>

Answer 1

body {
    background-image: ImagePathOrUrl;
}

或

html：

<div class="divclass">Your content</div>

css：

div.divclass {
     height:100%; /* or image height */
     width: 100%; /* or image width */
     background-image: ImagePathOrUrl;
}

我个人将以第二种方式进行操作，因此它只会出现在div页面上。如果将其放在body中，它将显示在样式表链接到的所有页面上。

Answer 2

. Intro {
             height:100%;
             width: 100%;
             margin auto;
             background: url("pexelsphoto.jpg") no-repeat 50% 50%;
 }

在图像名称上添加双引号。

Answer 3

图像完全出现了吗？

确保您的html正确

<div>
    <img src="image.png">
</div>

https://www.w3schools.com/tags/tag_img.asp

添加背景图片在CSS中不起作用

3 个答案: