我正在尝试创建一个悬停效果，当鼠标悬停在英雄部分时，文字会出现在它的上方。如果您取消注释 CSS 文件底部的代码，您将看到代码运行良好。唯一的问题是背景图片消失并完全变白。我不知道如何解决它。
在 CSS 底部完全取消注释代码，看看我在说什么
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 555;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}
#navbar__logo {
background-color: #ff8d02;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
#trade {
background-color: #0045f2;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
position: relative;
font-size: 13px;
bottom: 6px;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
background: linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
color: #fff;
transition: all 0.3s ease;
}
.navbar__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
border-radius: 4px;
transition: all 1s ease;
}
.navbar__links:hover {
color: #ff7802;
transition: all 0.3s ease;
}
@media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Hero Section */
.hero {
padding: 50px 0;
background-image: url(./images/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg);
background-size: cover;
overflow: hidden;
position: relative;
background-position: top;
display: flex;
flex-direction: column;
}
.hero__heading {
color: #fff;
font-size: 100px;
margin-left: 30px;
text-shadow: 2px 2px 8px #000000c4;
}
.orange {
color: rgb(255, 89, 0);
}
.main__btn {
margin: 0 auto;
margin-top: 3rem;
}
.main__btn a {
color: #fff;
text-decoration: none;
z-index: 2;
position: relative;
padding: 10px 20px;
font-size: 1.8rem;
}
.button__color {
background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0) );
background: linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
}
/*
.hero_two {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
opacity: 0;
transition: all 0.25s ease;
}
.hero_two > * {
transform: translateY(20px);
transition: all 0.25s ease;
}
.hero_two:hover {
opacity: 1;
}
.hero_two:hover {
transform: translateY(0);
} */<!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">
<title>Pigeon</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
<a href="#home" id="navbar__logo">Pigeon<small id="trade">TRADE</small></a>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
<a href="#home" class="navbar__links" id="home-page">Home</a>
</li>
<li class="navbar__item">
<a href="#about" class="navbar__links" id="about-page">About</a>
</li>
<li class="navbar__item">
<a href="#services" class="navbar__links" id="services-page">Services</a>
</li>
<li class="navbar__btn">
<a href="#sign-up" class="button" id="signup">Sign Up</a>
</li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<div class="hero_two hero" id="home">
<div class="hero__container">
<div class="image__overlay">
<div class="hero__content">
<h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
</div>
</div>
</div>
<div class="main__btn">
<button class="button button__color"><a href="#">Explore</a></button>
</div>
</div>
```答案 0 :(得分：0)
问题是当您为 background-image 添加 .hero 时，您正在覆盖 background: rgba(0, 0, 0, 0.6); 的 .hero_two 属性值
改用background-color: rgba(0, 0, 0, 0.6);
属性 background 是包括 background-image 在内的所有背景属性的简写。
背景速记 CSS 属性一次设置所有背景样式属性，例如颜色、图像、原点和大小或重复方法。
在这里阅读更多 -> background property
见下文
评论后编辑：
您在 SAME 元素上使用了两个类。如果您为 hero_two 编写一些样式，它将覆盖 hero 的样式。因为您正在选择相同的元素。
如果我理解正确，您想显示一个“覆盖”并在悬停时显示文本。您可以为此使用 pseudo-element（在本例中为 :after）并在您的 css 样式中进行一些调整。 （删除 hero_two 类名，因为它没用）
/* Hero Section */
.hero {
padding: 50px 0;
background-image: url("https://via.placeholder.com/150");
background-size: cover;
overflow: hidden;
position: relative;
background-position: top;
display: flex;
flex-direction: column;
}
.hero__heading {
color: #fff;
font-size: 100px;
margin-left: 30px;
text-shadow: 2px 2px 8px #000000c4;
}
.orange {
color: rgb(255, 89, 0);
}
.main__btn {
margin: 0 auto;
margin-top: 3rem;
}
.main__btn a {
color: #fff;
text-decoration: none;
z-index: 2;
position: relative;
padding: 10px 20px;
font-size: 1.8rem;
}
.button__color {
background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
background: linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
}
.hero:after {
content: "";
position: absolute;
background-color: rgba(255, 255, 255, 0.6);
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.hero * {
transform: translateY(20px);
transition: all 0.25s ease;
opacity: 0;
}
.hero:hover * {
transform: translateY(0px);
color: #ffffff;
opacity: 1;
}
.hero:hover:after {
opacity: 1;
}<div class="hero_two hero" id="home">
<div class="hero__container">
<div class="image__overlay">
<div class="hero__content">
<h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
</div>
</div>
</div>
<div class="main__btn">
<button class="button button__color"><a href="#">Explore</a></button>
</div>
</div>下次请只分享相关代码（例如，导航栏与此无关）并花时间制作像上面那样重现您的问题的代码片段。 （对于图片，请使用占位符，因为我们无法使用您自己的图片，因为我们没有它们）
快乐编码。