如何在div中使用背景图片?

我无法将图像添加到div。我将文件和图像放在同一个文件夹中,图像是JPG格式。我也尝试将在线图像链接(/wp-content/uploads/new2022/20220327voicc/157153258.jpg)放入,但没有成功。这里是我的html文件:如何在div中使用背景图片?

<!DOCTYPE html> 

<html>

<head>

<link rel="stylesheet" type="text/css" href="index.css">

</head>

<body>

<div class="topnav" id="myTopnav">

<a class="active" href=“#home”>Sweden</a>

<a href=“government.html”>Government</a>

<a href=“borders.html”>Borders</a>

<a href="#about">Iconography</a>

</div>

<div class="overview" id="overview">

<p>Sweden is a northern country that specializes in trading machinery, paper products, and iron and steel products</p>

</div>

</body>

</html

,这里是我的CSS文件:

/* Add a black background color to the top navigation */ 

.topnav {

background-color: #262228;

overflow: hidden;

margin: 0;

padding: 0;

}

/* Style the links inside the navigation bar */

.topnav a {

font-family: verdana;

float: left;

color: #f2f2f2;

text-align: center;

padding: 25px 27px;

text-decoration: none;

font-size: 19px;

}

/* Change the color of links on hover */

.topnav a:hover {

background-color: #ddd;

color: black;

}

/* Add a color to the active/current link */

.topnav a.active {

background-color: #FFCE00;

color: white;

}

body {

margin: 0;

padding: 0;

font-family: verdana;

}

.overview p {

font-size: 20px;

padding-top: 30px;

padding-right: 50px;

padding-left: 550px;

color: #262228;

text-align: right;

}

.overview {

background-image: url(“stockholm.jpg”);

}

回答:

  1. 使用普通报价",而不是印刷报价在CSS url指令“”
  2. 在CSS中,图像的路径是相对于CSS文件而不是HTML文件指定的。所以请确保图像与CSS文件位于同一个文件夹中。请使用./stockholm.jpg而不是stockholm.jpg

回答:

的图片您引用的是它在同一个目录下style.css文件位置。如果没有,则指定图像的路径相对路径,如background-image: url('./img/stockholm.jpg');(如果该文件位于img文件夹中)。请参阅相对和绝对文件路径声明以了解。希望能帮助到你。谢谢。

以上是 如何在div中使用背景图片? 的全部内容, 来源链接: utcz.com/qa/259476.html

回到顶部