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

14 浏览
0 Comments

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

这个问题已经在这里有答案：

如何在同一元素或div上添加带有背景图片和CSS3渐变的线性渐变颜色？

如何在同一元素或

上以background-image的形式添加linear-gradient颜色？ 我想在同一个 html 元素或 div 上添加带有 liinear-gradient 的 background-image ，但我无法这样做。 任何帮助将不胜感激。

以下是我的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;
}

admin 更改状态以发布 2023年5月22日
0

1 答案

0 Comments

如果您想要在背景图像上添加一个半透明的渐变色，您的第一个想法可能是叠加另一个div。然而，最简单的方法是向background-image CSS规则添加另一个参数。 \n

#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;
}

\n

something here

something here

0