如何在同一元素上添加带有背景图像的线性渐变？答案

【问题标题】：How to add linear-gradient with background-image on same element?如何在同一元素上添加带有背景图像的线性渐变？
【发布时间】：2022-07-05 15:29:03
【问题描述】：

如何在同一元素或div 上添加linear-gradient 颜色和background-image？我想在相同的html 元素或div 上添加background-image 和linear-gradient。但我无法这样做。任何帮助将不胜感激。

下面是我的CSS：

.dvNav {
  flex-direction: column;
  display: flex;
  padding: 0.5rem 1rem 0 1rem;
  background: rgb(28, 3, 25);
  /* background: url(/images/amey.png) no-repeat top right; */
  background: linear-gradient(
    180deg,
    rgba(28, 3, 25, 1) 0%,
    rgba(35, 1, 26, 1) 35%,
    rgba(52, 1, 34, 1) 100%
  );
  color: var(--white-color);
  height: 100vh;
}

【问题讨论】：

标签： html css background-image linear-gradients

【解决方案1】：

如果您想在背景图像之上添加一个半不透明/半透明的颜色渐变，您的第一个想法可能是覆盖另一个 div

但是，最简单的方法是在 background-image css 规则中添加另一个参数。

#show_bg {
    background-image: url('https://picsum.photos/200/300');
    width: 80%;
    height: 200px;
    background-size: cover;
    color: white;
}

#show_bg_2 {
    background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
    url('https://picsum.photos/200/300');
    width: 80%;
    height: 400px;
    background-size: cover;
    color: white;
    padding: 20px;
}

<div id='show_bg'>something here</div>
<br/>
<div id='show_bg_2'>something here</div>

【讨论】：