在背景图片上使用CSS渐变

70

我一直在尝试在背景图片的顶部使用线性渐变，以使背景底部的阴影效果从黑色变为透明，但似乎无法使其显示。

我在这里阅读了其他案例和示例，但没有一个对我有用。我只能看到渐变或图像，但不能同时看到它们。这是链接

只需单击第一个徽标，就忽略该效果，此后，我要尝试的是整个网站的正文。

这是我的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)));
}

展开摘要

html css gradient

— 帕姆
source

我没有真正得到您想要的东西

— A. Cristian Nogueira

1

该渐变仅是Webkit，不适用于FF或IE。此外，我不认为您可以将BG图像和渐变应用于背景。您需要将图片应用到背景图片，然后在渐变的顶部再加上另一个图层（例如div）

— random_user_name 2013年

1

是否可以复制背景图片和CSS3渐变？

— 开拓者

可能这就是您可能想要实现的目标

— Anuj Kaithwas 2013年

138

好的，我通过在该行的末尾添加背景图片的网址来解决此问题。

这是我的工作代码：

.css {
  background: -moz-linear-gradient(top, 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;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  background: -webkit-linear-gradient(top, 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;
  background: -o-linear-gradient(top, 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;
  background: -ms-linear-gradient(top, 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;
  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>

展开摘要

— 帕姆
source

整天都在寻找，这是唯一可以按我需要的方式工作的解决方案。感谢您的发布。

— GenXisT

1

由于某种原因，我必须先放置图像，然后放置渐变。谢谢！

— 瓦拉马斯2014年

为我做得很棒！唯一不同的是，就我而言，图像是我想重复的图案。

— Herick

2

这将图像置于渐变之后。这个答案放在上面。

— Cees Timmerman

1

惊人。美丽。当我只是想让它工作时，所有其他花花公子解释等等等等。

— 黎明

13

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
source

如果我这样说，它就可以在chrome上运行：

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;

— Pam，

它仅使用webkit，因此只能在webkit浏览器中使用。尝试： gradients.glrzad.com以获取完整信息：-moz-linear-gradient =（Firefox）-ms-linear-gradient =（IE）-o-linear-gradient =（Opera）

— Ma9ic 2013年

您可能还需要注意，某些渐变在旧版本的IE上不起作用，可能值得看看css3pie.com来提供帮助。

— Ma9ic 2013年

如果您需要动态设置背景图像（如HTML中的样式元素），则可能会更好。

— harvzor

5

#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）
source

4

接受的答案效果很好。只是为了完整性（并且我喜欢它的简短性），我想与指南针（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"));
}

— 克里斯托弗·洛肯
source