克隆Netflix网站：背景图中间白色区域CSS实现问题求助

我正在克隆Netflix网站，还原背景图效果时遇到问题：Netflix背景图中间有个通过CSS实现的白色高亮区域，我没法复刻出来。已经用黑色背景div实现了背景图的深色遮罩，但尝试添加白色背景div来做中间白色区域时完全无效。

• 原效果：背景图中间有横向的渐变高亮区域，让中间内容区域更突出
• 尝试效果：只有整体深色遮罩，没有中间的白色高亮部分

我的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix Nepal - Watch TV Shows Online, Watch Movies Online </title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<nav>
<div class="navbar">
<span><img src="assets/img/logo.svg" alt=""></span>
<button>Sign In</button>
</div>
    </nav>
<main>
    <div class="bg-image">
        <div class="bg-box1"><div class="bg-box2"></div></div>
        
    </div>
    
</main>

<footer>

</footer>
</body>
</html>

我的CSS代码 #

* {
    margin: 0;
    padding: 0;
    }

.navbar{
width: 75vw;
margin:  20px auto 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 10;
padding-top: 1px;
}

.navbar span img{
padding-right: 15px;
width: 150px;
}

.navbar button{
color: white;
text-decoration: none;
border: none;
padding: 8px 17px;
border-radius: 5px;
background-color: rgba(229, 9, 20, 0.938);
font-size: 14px;
}

main{
position: relative;
overflow: clip;
top: -67px;
}

.bg-image{
background-image: url("assets/img/background.jpg");
height: 102vh;
max-width: 100vw;
background-repeat: no-repeat;
background-origin:border-box;
background-size: cover;
background-position: bottom ;
position: relative;
top: -25px;
transform: scale(1.25);
}

.bg-box1{
height: 101vh;
width: 100%;
background-color: black;
opacity: 0.7;
position: absolute;
display: flex;
align-items: center;
z-index: 101;
}

解决方案 #

核心是用线性渐变遮罩代替单独的白色div，原效果不是实心白色块，而是遮罩层中间区域的透明度更低（更亮），上下区域透明度更高（更暗）。

步骤1：移除多余元素 #

删掉HTML里的.bg-box2空div，不需要额外元素。

步骤2：修改遮罩层的背景样式 #

替换.bg-box1的CSS代码，用线性渐变实现中间亮、上下暗的效果：

.bg-box1{
    height: 101vh;
    width: 100%;
    /* 线性渐变：上下是高透明度黑色，中间是低透明度黑色（即高亮） */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.8) 100%);
    position: absolute;
    z-index: 101;
}

步骤3：优化布局定位（可选） #

去掉main和bg-image里多余的top偏移，让布局更合理：

main{
    position: relative;
    overflow: hidden; /* 用hidden替代clip，兼容性更好 */
}

.bg-image{
    background-image: url("assets/img/background.jpg");
    height: 102vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; /* 用center替代bottom，背景图显示更完整 */
    transform: scale(1.25);
}

这样修改后，背景中间就会出现和Netflix一致的高亮区域，既保留了整体深色遮罩，又突出了中间内容区域。

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