如何在背景图像上叠加 CSS 渐变？

将 CSS 渐变叠加到背景图像上

许多开发人员在尝试同时显示背景图像和线性渐变时会遇到困难。目标是在背景底部创建逐渐过渡，通常从黑色到透明。然而，大多数情况下，只有渐变或图像可见，而不是两者都可见。

这个问题的解决方案在于正确指定背景样式中元素的顺序。要将渐变成功覆盖到图像上，请遵循以下修订后的语法：

body {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,1))),
  url("http://www.skrenta.com/images/stackoverflow.jpg") no-repeat;
}

通过将背景图像 URL 放在行的末尾，我们确保它出现在渐变下方，从而允许两个元素可见。

以上是如何在背景图像上叠加 CSS 渐变？的详细内容。更多信息请关注PHP中文网其他相关文章！