图像未显示。我该怎么办？

这是我的html代码

<!DOCTYPE html>
<html lang="en">
<head>
<title>portfolio website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,
wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" 
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==
" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4t
Mg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin=
"anonymous" referrerpolicy="no-referrer">
</head>
<body>
<!--hero section start-->
<div class="hero">
<nav>
<h2 class="logo">Portfolio</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<a href="#" class="btn">Subscribe</a>
</nav>
</div>

</body>
</html>

这是我的css。

*{
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
box-sizing: border-box;
}
.hero{
height: 100vh;
width: 100%;
background-image: url("file://C:UsersuserDesktoppexels-cup-of-couple-6177571.jpg");
background-size: cover;
background-position: center;
}

我在css中添加了一个图像，但由于某种原因，它没有显示。

您应该将图像放在当前工作目录中，然后使用图像的相对路径。

将图像路径更改为相对路径。例如：

.hero{
height: 100vh;
width: 100%;
background-image: url("images/pexels-cup-of-couple-6177571.jpg");
background-size: cover;
background-position: center;
}

您可以将您的图像放在"images"文件夹中。这个例子中的路径被称为相对路径，这意味着它是一个本地文件，相对于我们的项目和我们当前的工作目录

*{
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
box-sizing: border-box;
}
.hero{
height: 100vh;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1546641082-b3c3d4bfae25?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80");
background-size: cover;
background-position: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>portfolio website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,
wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" 
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==
" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4t
Mg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin=
"anonymous" referrerpolicy="no-referrer">
</head>
<body>
<!--hero section start-->
<div class="hero">
<nav>
<h2 class="logo">Portfolio</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<a href="#" class="btn">Subscribe</a>
</nav>
</div>

</body>
</html>

相关内容

最新更新

热门标签：