Question

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

我尝试使用外部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>

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

Answer 2

您使用css属性import numpy as np import pycuda.gpuarray as gpuarray import pycuda.autoinit a = gpuarray.to_gpu(np.array([53])) print((a**2).get()[0])的方式不正确，请参考this documentation进行渐变样式设计。

要在图像顶部添加渐变色，您需要使用多个html元素，例如-webkit-linear-gradient。

div

您将需要设置这些元素的样式，并且最好使用具有透明度的渐变色或颜色，例如<div id={gradient}> <div id={background-image}></div> </div>。

希望这会有所帮助！

线性渐变干扰背景图像

2 个答案: