在背景图像上使用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)));
}

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>

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)

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>

Answer 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"));
}

Answer 5

如果无法更新背景属性并且无法考虑额外的元素或伪元素，则可以使用

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>

Answer 6

摆弄了半个小时，直到发现我的图像没有透明背景:-)