求助：鼠标悬停链接时实现背景图全屏填充且保比例+渐变叠加

Hey Angelina, let's get those hover background effects working exactly how you want them! The core issue with your previous attempts was either restricting the image to the link's container, not filling the screen properly, or losing aspect ratio. Here's a clean approach that fixes all these problems and adds gradient overlays too.

Key Fixes & Improvements #

• A single full-screen background container that stays behind your content
• Uses background-size: cover to preserve image aspect ratio while filling the screen
• Easy gradient overlays by combining gradients and background images
• Smooth transitions for the hover effect

Modified HTML #

We'll add a dedicated full-screen background container, and keep your links structure clean:

<!DOCTYPE HTML>
<html lang="en">
<head>
 <title>TEST</title>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- CSS -->
 <link href="style.css" rel="stylesheet" type="text/css">
 <!-- IMPORTED FONTS -->
 <link href="https://fonts.googleapis.com/css?family=Heebo:800" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>
<body>
 <div class="container">
 <br><br>
 <h1>Hi! I'm <div class="special">Angelina.</div></h1>
 <h2>Get to know me as a</h2>
 <section>
  <!-- Full-screen background container -->
  <div class="hover-background"></div>
  <ul>
   <li><a class="link1" href="student.html">Student</a></li>
   <li><a class="link2" href="maker.html">Maker</a></li>
   <li><a class="link3" href="volunteer.html">Volunteer</a></li>
  </ul>
 </section>
 </div>
</body>
</html>

Modified CSS #

This handles the full-screen background, hover triggers, aspect ratio, and gradient overlays:

@import url('https://fonts.googleapis.com/css?family=Montserrat:bold');
body {
 padding: 0;
 margin: 0;
 background-image: url("https://images.pexels.com/photos/261899/pexels-photo-261899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

/* Full-screen hover background container */
.hover-background {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 z-index: -1; /* Stay behind content */
 opacity: 0;
 transition: opacity 1.5s ease;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 /* Base gradient overlay - adjust colors/opacity as needed */
 background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5));
}

section {
 width: 100%;
 position: relative; /* Ensure content stays above background */
}

h1 {
 font-family: 'Heebo', sans-serif;
 font-size: 500%;
 text-transform: uppercase;
 color: #ffffff;
}
h2 {
 font-family: 'Heebo', sans-serif;
 text-transform: uppercase;
 color: #ffffff;
}
p {
 font-family: 'Merriweather', serif;
 font-size: 150%;
 color: #ffffff;
}
ul {
 width: 100%;
 margin: 0;
 margin-left: 1em;
 padding: 0;
}
ul li {
 list-style: none;
 width: 25%;
 display: inline-block; /* Keep links in a row */
}

/* Link hover styles + background triggers */
a:link {
 font-size: 1000%;
 font-family: 'Heebo', sans-serif;
 color: #ffffff;
 text-decoration: none;
 display: inline-block;
}

a.link1:hover {
 text-shadow: -5px 0 sienna, 0 5px salmon, 5px 0 salmon, 0 -5px salmon;
}
/* Trigger Student background on hover */
a.link1:hover ~ .hover-background {
 opacity: 1;
 background-image: linear-gradient(rgba(160,82,45,0.3), rgba(250,128,114,0.5)), 
                   url(https://images.pexels.com/photos/947785/pexels-photo-947785.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}

a.link2:hover {
 text-shadow: -5px 0 teal, 0 5px moccasin, 5px 0 moccasin, 0 -5px moccasin;
}
/* Trigger Maker background on hover */
a.link2:hover ~ .hover-background {
 opacity: 1;
 background-image: linear-gradient(rgba(0,128,128,0.3), rgba(245,222,179,0.5)), 
                   url(https://images.pexels.com/photos/1110357/pexels-photo-1110357.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}

a.link3:hover {
 text-shadow: -5px 0 navy, 0 5px coral, 5px 0 coral, 0 -5px coral;
}
/* Trigger Volunteer background on hover */
a.link3:hover ~ .hover-background {
 opacity: 1;
 background-image: linear-gradient(rgba(0,0,128,0.3), rgba(255,127,80,0.5)), 
                   url(https://images.pexels.com/photos/4839/nature-river-waterfall.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}

.special {
 display: inline;
 text-shadow: -4px 0 teal, 0 4px teal, 4px 0 salmon, 0 -4px salmon;
}

How It Works #

1. Full-Screen Container: The .hover-background element is fixed to the viewport, covering the entire screen. It starts hidden (opacity:0).
2. Aspect Ratio Preservation: background-size: cover ensures the image scales to fill the screen without stretching—cropping only when necessary to maintain aspect ratio.
3. Gradient Overlays: We use background-image with two layers: first the gradient (with color matching your text shadows for cohesion), then the background image. This way the gradient sits on top of the image.
4. Hover Triggers: The ~ sibling selector targets the .hover-background when each link is hovered, switching its background image and fading it in with the transition.

You can tweak the gradient colors, opacity values, and transition speed to match your exact design preferences!

内容的提问来源于stack exchange，提问作者Angelina