如何在div中使用背景圖片？

-4

我無法將圖像添加到div。我將文件和圖像放在同一個文件夾中，圖像是JPG格式。我也嘗試將在線圖像鏈接（http://www.aussieinfrance.com/wp-content/uploads/stockholm-4.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」); 
}

來源

2017-12-03 Harry Potter

使用普通報價"，而不是印刷報價在CSS url指令「」。
在CSS中，圖像的路徑是相對於CSS文件而不是HTML文件指定的。所以請確保圖像與CSS文件位於同一個文件夾中。請使用./stockholm.jpg而不是stockholm.jpg。

來源

2017-12-03 04:27:27 Finesse

的圖片您引用的是它在同一個目錄下style.css文件位置。如果沒有，則指定圖像的路徑相對路徑，如background-image: url('./img/stockholm.jpg');（如果該文件位於img文件夾中）。請參閱相對和絕對文件路徑聲明以瞭解。希望能幫助到你。謝謝。

來源

2017-12-03 04:25:39

如何在div中使用背景圖片？

回答

相關問題