线性梯度干扰背景图像答案

【问题标题】：Linear Gradient interfering with background image线性梯度干扰背景图像
【发布时间】：2020-02-27 02:57:58
【问题描述】：

我想将线性渐变应用到背景图像，但是当我应用渐变时，网页变成白色。这真的很奇怪，因为渐变应该是黑色的。

我尝试使用外部 div 并仅使用它来应用线性渐变，但即使这样也不起作用。尽管我使用 rgba 函数添加了透明度，但我觉得它只是应用在图像前面。请提前帮助和感谢。

jsfiddle ~ https://jsfiddle.net/purpkev/Lkb91jzv/

*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    a{
        text-decoration: none;
        color: white;
        /*overflow: hidden;*/
    }
    
    .hero{
        position: relative;
        overflow: hidden;
        min-height: 100%;
    }
    
    .hero::before{
        background-image: -webkit-linear-gradient(rgba(black, .5), rgba(black,.5)), url("/img/header.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        content: '';
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        will-change: transform;
        z-index: -1;
        
    }
    
    body{
        font-family: "Fira Sans", sans-serif;
        font-size: 2rem;
        color: white;
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ukiyo Sushi ツ</title>
        <link href = "/style.css" type = "text/css" rel = "stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
    </head>
    <body>
        <div class = "hero">
            <header>
                <nav class = "navbar">
                    <a href = "#" class = "logo">Ukiyo Sushi ツ</a>
                    <ul>
                        <li><a href ="#" class = "about">About us</a></li>
                        <li><a href = "#" class = "menu">Menu</a></li>
                        <li><a href = "#" class = "services">Services</a></li>
                        <li><a href = "#" class = "contact">Contact</a></li>
                    </ul>
                </nav> 
                <div class = "sushiPlatter">
                    <h2>Chef's Special Sushi Platter</h2>
                    <br>
                    <a href = "#">View Menu</a>
                </div>
            </header>
        </div>
        <section class = "idkYet">
            <div>
                <span>hello</span>
            </div>    
        </section>
    </body>
    </html>

【问题讨论】：

标签： html css

【解决方案1】：

顾名思义，RGBA 由 4 个参数组成 - 红、绿蓝和 Alpha（不透明度）。在线性渐变中，RGBA 颜色应该是rgba(0, 0, 0, .5)。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: white;
  /*overflow: hidden;*/
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

.hero::before {
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("https://picsum.photos/200/300");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  content: '';
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  will-change: transform;
  z-index: -1;
}

body {
  font-family: "Fira Sans", sans-serif;
  font-size: 2rem;
  color: white;
}

<div class="hero">
  <header>
    <nav class="navbar">
      <a href="#" class="logo">Ukiyo Sushi ツ</a>
      <ul>
        <li><a href="#" class="about">About us</a></li>
        <li><a href="#" class="menu">Menu</a></li>
        <li><a href="#" class="services">Services</a></li>
        <li><a href="#" class="contact">Contact</a></li>
      </ul>
    </nav>
    <div class="sushiPlatter">
      <h2>Chef's Special Sushi Platter</h2>
      <br>
      <a href="#">View Menu</a>
    </div>
  </header>
</div>
<section class="idkYet">
  <div>
    <span>hello</span>
  </div>
</section>

【讨论】：

【解决方案2】：

您使用css属性-webkit-linear-gradient的方式不正确，请参考this documentation进行渐变样式。

为了在图像顶部添加渐变色，您需要使用多个 html 元素，例如 div。

<div id={gradient}>
  <div id={background-image}></div>
</div>

您将需要设置这些元素的样式，并且最好使用具有透明度的渐变或颜色，例如rgba。

希望这会有所帮助！

【讨论】：

虽然用OP的语法确实不能使用渐变，但实际上可以在css中从上到下对背景图片进行分层。示例：w3schools.com/cssref/…