当我将 div 高度设置为 100vh 时，我的背景图像不断消失

Question

为什么我的开发工具显示我在 header 容器上没有背景图像。 它没有出现在 VS Code 中。

我的 header 背景图片只显示了一秒钟，然后就消失了。 只有当我将我的 div haight 设置为 100vh 时才会发生这种情况。

 *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Barlow', sans-serif; }.header{ height: 100vh; width: 100%; background-image: url("images/image-header.jpg"); background-size: cover; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Barlow:wght@600&family=Fraunces;wght@700.900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <title>Sunnyside Agency</title> </head> <body> <div class="header"> <h1 class="logo">sunnyside</h1> <ul> <li>About</li> <li>Services</li> <li>Projects</li> <li><button>Contact</button></li> </ul> </div> <div class="main"></div> <div class="bott"></div> <script src="app.js"></script> </body> </html>

我试图将图像放在其他地方，并更改图像。 我对其他图像也有同样的问题。

Answer 1

它工作得很好，但是你放置的图像路径似乎是错误的。

查看下面的示例，我只更改了图像

 *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Barlow', sans-serif; }.header{ height: 100vh; width: 100%; background-image: url("https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg"); background-size: cover; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Barlow:wght@600&family=Fraunces;wght@700.900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <title>Sunnyside Agency</title> </head> <body> <div class="header"> <h1 class="logo">sunnyside</h1> <ul> <li>About</li> <li>Services</li> <li>Projects</li> <li><button>Contact</button></li> </ul> </div> <div class="main"></div> <div class="bott"></div> <script src="app.js"></script> </body> </html>

当我将 div 高度设置为 100vh 时，我的背景图像不断消失

问题描述

1 个解决方案

解决方案1
0 2021-08-23 00:55:12

当我将 div 高度设置为 100vh 时，我的背景图像不断消失

问题描述

1 个解决方案

解决方案1 0 2021-08-23 00:55:12

解决方案1
0 2021-08-23 00:55:12