干扰背景图像的线性渐变

问题描述 投票:0回答:1

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

我已经尝试使用外部div,并且仅使用它来应用线性渐变,但是即使这样也没有用。我觉得它只是应用在图像的前面,即使我添加了带有rgba函数的透明度。请帮助并提前致谢。

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

html-

<!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>

css-

*{
    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;
}
html css
1个回答
0
投票

顾名思义,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>
© www.soinside.com 2019 - 2024. All rights reserved.