使用CSS渐变覆盖背景图像

Question

我一直在尝试在背景图像上使用线性渐变，以便在我的背景底部从黑色到透明的地方产生淡化效果，但似乎无法使其显示。

我阅读了其他类似情况和示例，但它们都对我无效。我只能看到渐变或图像，而不能同时看到它们。这是链接。

只需单击第一个标志，忽略该效果，我要在那之后在整个网站的主体中实现相同效果。

这是我的CSS代码：

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

- Pam

---

我不是很明白你在寻找什么。 - A. Cristian Nogueira

那个渐变只适用于Webkit - 在FF或IE上不起作用。此外，我认为您不能将BG图像和渐变应用于背景。您需要将图像应用于bg，然后在顶部有另一层（例如div）具有渐变。 - random_user_name

可能是重复的问题：是否可以将背景图片和CSS3渐变组合使用？ - Blazemonger

可能这个是你想要实现的。 - Anuj Kaithwas

Answer 1

好的，我通过在行末添加背景图片的url解决了它。

这是我的可用代码：

.css {
  background: 
   linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
   url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

<div class="css"></div>

- Pam

---

一整天都在寻找这个，这似乎是唯一一个能够按照我的需求正常工作的解决方案。感谢您的发布。 - GenXisT

由于某些原因，我不得不先放置我的图像，然后再放置渐变。谢谢！ - Valamas

对我来说非常有效！唯一的区别是，在我的情况下，图像是我想要重复的图案。 - Herick

将图像放在渐变背后。这个答案 将其放在上方。 - Cees Timmerman

我无论如何都会得到其中一个，渐变或图像。请帮忙。我在这里使用内联样式，并设置需要设置background-image属性，该属性从服务器获取图像，并需要在其上添加渐变。 - Pushkar Kathuria

太棒了。太美了。其他所有人都在解释一些废话，而我只是想让它工作。 - dawn

Answer 2

body {
    margin: 0;
    padding: 0;
    background: url('img/background.jpg') repeat;
}

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}

请注意：这只使用webkit，因此仅适用于webkit浏览器。

尝试：

-moz-linear-gradient = (Firefox)
-ms-linear-gradient = (IE)
-o-linear-gradient = (Opera)
-webkit-linear-gradient = (Chrome & safari)

- Ma9ic

---

如果我像这样放置它：background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))), url('/img/fondo-home.jpg') no-repeat;，它可以在Chrome上运行。 - Pam

它只使用Webkit，因此只能在Webkit浏览器中运行。尝试：http://gradients.glrzad.com/ 获取完整的：-moz-linear-gradient =（Firefox） -ms-linear-gradient =（IE） -o-linear-gradient =（Opera） - Ma9ic

您可能还需要注意，一些渐变效果在旧版本的IE上无法正常工作，建议查看http://css3pie.com/以获取帮助。 - Ma9ic

如果您需要在HTML的样式元素中动态设置背景图片，那么这很可能更好。 - harvzor

Answer 3

#multiple-background{
 box-sizing: border-box;
 width: 123px;
 height: 30px;
 font-size: 12pt;
 border-radius: 7px;  
 background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png"), linear-gradient(to bottom, #4ac425, #4ac425);
 background-repeat: no-repeat, repeat;
 background-position: 5px center, 0px 0px;
    background-size: 18px 18px, 100% 100%;
 color: white; 
 border: 1px solid #e4f6df;
 box-shadow: .25px .25px .5px .5px black;
 padding: 3px 10px 0px 5px;
 text-align: right;
 }

<div id="multiple-background"> Completed </div>

- Mohammad Faizan

Answer 4

这个回答很有效。为了完整起见（并且因为我喜欢它的简短），我想分享如何使用compass（SCSS / SASS）实现它：

body{
  $colorStart: rgba(0,0,0,0);
  $colorEnd: rgba(0,0,0,0.8);
  @include background-image(linear-gradient(to bottom, $colorStart, $colorEnd), url("bg.jpg"));
}

- Christopher Lörken

Answer 5

折腾了半个小时才意识到我的图片没有透明背景 :-)

- ESP32

Answer 6

如果您无法更新背景属性，也无法考虑额外的元素或伪元素，您可以使用border-image 相关链接：https://css-tip.com/gradient-overlay-border-image/

.css {
  height: 250px;
  background: url(https://picsum.photos/id/28/900/600) center/cover; 
}

.css {
  border-image:
    linear-gradient(#0003,#000) /* your gradient here */
    50%/50%; 
}

<div class="css"></div>

- Temani Afif