Question

为什么背景图片不起作用？我直接从图像中复制了相对路径。

 h2 {
     font-style: italic;
     border-bottom: 1px;
     font-weight: normal;
     margin-bottom: 0px;
     background-image: url("images/logo.jpg");
     background-repeat: no-repeat;
     background-position: top left;
     padding-right:10px
}
 .lead {
     border-style: solid;
     border-width: 5px;
     background-image: url("images/background.jpg");
     /* I cannot get the background image to print */
     background-size: contain;
     background-repeat: no-repeat;
}

Answer 1

您需要在<h2>中包含内容。如果您的图片就是内容（表示您的<h2>为空），请向包含图片的div中添加一个height属性。

示例1 ：（包含内容）

h2 {
     font-style: italic;
     border-bottom: 3px;
     font-weight: normal;
     margin-bottom: 0px;
     background-image: url("http://lorempixel.com/400/200/");
     background-repeat: no-repeat;
     background-position: top left;
}

<h2>test</h2>

示例2 ：（无内容，增加高度）

h2 {
     font-style: italic;
     border-bottom: 3px;
     font-weight: normal;
     margin-bottom: 0px;
     background-image: url("http://lorempixel.com/g/400/200/");
     background-repeat: no-repeat;
     background-position: top left;
     height: 100px;
}

<h2></h2>

Answer 2

共享您的路径或文件夹结构。如果您的图片文件夹不在HTML CSS文件夹中，则尝试使用

作为URL

('./images/logo.png')

OR 最好再设置一个div并为其提供背景图片。

<div class="Header">             
  <h2>News</h2>             
</div>

.Header h2 {
     font-style: italic;
     border-bottom: 3px;
     font-weight: normal;
     margin-bottom: 0px;
     height: 100%;
     width: 100%;
     background-image: url("images/logo.png");
     background-repeat: no-repeat;
     background-position: top left;
}

Answer 3

只需将路径更改为：

background-image: url("../../images/logo.png");

为了更加安全，请使用可以验证链接（例如括号或Visual Studio）的编辑器。

祝你有美好的一天：）

为什么我的背景图片无法在CSS中工作？

3 个答案: