背景渐变工作但不显示图像

Question

我在实现这一点时遇到了问题，在上下文中，我正在制作一个简单的统计跟踪网站，.body-bg-image是我的主页。

我想要一个渐变色作为背景，而不是纯色，所以我试着这样做，正如你在下面看到的那样。它确实显示了渐变，但不再显示图像。

.body-bg-image {
background: linear-gradient(
to top,
rgba(196, 145, 2, 1) 0%,
rgba(149, 48, 54, 1) 87%
)
fixed,
/* this image doesn't show, 
it works if I have the background as a color but not as a gradient */
url("./assets/apexrevanant.png") top center no-repeat;
}

它过去是这样工作的，只有纯色和图像：

.body-bg-image {
background: var(--primary-color) url("./assets/apexrevanant.png") top center no-repeat;
}

Answer 1

使用background简写，顺序很重要

如果图像是在渐变之后声明的，则线性渐变会向图像添加覆盖。因为你有纯色，所以它是看不见的。

如果你将颜色设置为较低的不透明度，你应该能够看到它：

body {
height: 100vh;
background: linear-gradient(to top, rgba(196, 145, 2, 0.5) 0%, rgba(149, 48, 54, 0.5) 87%) fixed, url('https://mobiledevmemo.com/wp-content/uploads/2014/12/173572251_Chocolate-chip-cookie.jpg') top center no-repeat;
background-size: auto 100%;
}

---

如果您希望图像位于梯度的前面，请反转它们在中声明的顺序：

body {
height: 100vh;
background: url('https://mobiledevmemo.com/wp-content/uploads/2014/12/173572251_Chocolate-chip-cookie.jpg') top center no-repeat, linear-gradient(to top, rgba(196, 145, 2, 0.5) 0%, rgba(149, 48, 54, 0.5) 87%) fixed;
background-size: auto 100%;
}