我正在复制教程中的代码，但无法获得背景图像。
CSS文件和HTML文件在同一个文件夹中，图片是sun.jpg也在同一个文件夹中CSS文件链接并将影响h3(改变颜色，但"main")什么也不做。我认为这可能是URL，但当我输入太阳，我得到的选项VS编辑器的太阳。jpg这意味着它知道它在那里。图片只在主题栏上写着(只读)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Page Design</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<div class="navbar">
<div class="icon">
<h2 class="logo">random text</h2>
<h3>text for h2</h3>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
h3{ color: saddlebrown;
margin-left: 20px;}
main {
width: 100%;
background-image: linear-gradient(to
top,),rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%, url(sun.jpg);
background-position: center;
background-size: cover;
height: 109vh;
- 您的选择器错误。应该是
.main，因为main是一个类。 - 你的background-image应该只是图片的URL。将梯度位改为
background-color。
* {
margin: 0;
padding: 0;
}
h3 {
color: saddlebrown;
margin-left: 20px;
}
.main {
width: 100%;
background-color: linear-gradient(to top, ), rgba(0, 0, 0, 0.5)50%, rgba(0, 0, 0, 0.5)50%;
background-image: url(https://via.placeholder.com/300x300);
background-position: center;
background-size: cover;
height: 109vh;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Page Design</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<div class="navbar">
<div class="icon">
<h2 class="logo">random text</h2>
<h3>text for h2</h3>
</div>
</div>
</div>
</body>
</html>