图像从下到上的渐变效果 css

Question

我有一张图片作为背景，我想从下到上为图片添加渐变效果

我有图片：

我想要上面的图像，从下到上有这样的渐变图像：

HTML代码：

<header>
   <div class="header-logo">
       <img src="logo.png" alt="">
    </div>
</header>

CSS代码：

header{  
   background: url('/test/header.jpg') no-repeat;
   min-height: 132px;
   background-size: cover;
}

Answer 1

您只需将 linear-gradient 添加到 header 的 background 属性，其中还包括 url（或本地文件路径）link图片。你可以给 linear-gradient 任意多的颜色（在我的例子中有三种），它会自动为你混合

header {
  background: linear-gradient(rgb(0 0 0 / 0%), rgb(255 255 255 / 34%), white), url(https://images.unsplash.com/photo-1487035170094-b76fc43abdf5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=500&q=60) no-repeat;
  min-height: 132px;
  background-size: cover;
}

<header>
  <div class="header-logo">
  </div>
</header>

Answer 2

如果您需要过渡到背景颜色：

header {
  background: linear-gradient(#fff0, #fff), url('https://i.stack.imgur.com/fZxQj.jpg') no-repeat;
  min-height: 132px;
  background-size: cover;
}

<header>
  <div class="header-logo">
    <img src="logo.png" alt="">
  </div>
</header>

如果您需要透明过渡：

header {
  background: url('https://i.stack.imgur.com/fZxQj.jpg') no-repeat;
  min-height: 132px;
  background-size: cover;
  -webkit-mask-image: linear-gradient(#000, #0000);
  mask-image: linear-gradient(#000, #0000);
}

<header>
  <div class="header-logo">
    <img src="logo.png" alt="">
  </div>
</header>

图像从下到上的渐变效果 css

gradient effect on image from bottom to top css

css

gradient

background