小贝子编程

CSS背景图像不显示时声明doctype



当我在vscode中为这个网站声明doctype时，背景图像不显示为高度设置为0，背景图像只显示在quirks模式

该图像仍然可以通过inspect元素中的链接访问。

我试过修改代码，使用不同的图像，重新安排其位置并改变样式表中的值。

为什么会发生这种情况?

<!DOCTYPE html>
<html>
<head>
<title>Hot Beans Web - Home</title>
<link rel="stylesheet" href="stylesimages/home.css">
</head>
<body>
<div class="header">
<img src="stylesimages/logo.png" width="400px" height="100px">
</div>
<div class="bgimage"></div>
<div class="bg-text">
<h1 style="font-size:90px">We code the future.</h1>
<p>Providing rich, advanced and sophisticated IT solutions that will make your website shine.</p>
</div>
<p>asjjssj</p>
<h1><a href="https://www.youtube.com/" target="_blank">Hot Beans Web</a></h1>
<button>shshs</button>
<a href="https://www.youtube.com/" target="_blank">Link to Youtube</a>
</body>
</html>

CSS

.bgimage {
background-image:url("homebackground.jpeg");
height: 100%; 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.header {
padding: 0px;
text-align: left;
background: #ac1b1b;
color: rgb(0, 0, 0);
font-size: 20px;
text-indent: 20px;
}
body{
font-family: 'Roboto', sans-serif;
}
.bg-text {
color: white;
font-weight: bold;
border: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: left;
}

文件路径

我实际上并没有测试你的代码。由于具有图像背景的div立即关闭，即没有任何子(<div class="bgimage"></div>)并且其高度在css中设置为100%，因此它将获得0px的高度。首先，尝试将高度值更改为100vh(视口高度)，看看它是否有效。然后，如果您希望该图像成为整个页面的背景，请尝试将bgimage类从该div移动到body元素。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium