是否可以使用 css 使背景图像“淡化”或将底部渐变为透明，以便显示背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15814346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to use css to make a background image "fade" or gradient the bottom portion to transparent so that a background color shows?
提问by Chris569x
I know that this can easily be done in any image editing program, I was just curious if there was a way just using css.
我知道这可以在任何图像编辑程序中轻松完成，我只是好奇是否有一种方法可以只使用 css。
Example:
例子：
body {background-color: #837960; background-image: url("Images/background.jpg") background-repeat: no-repeat;}
Could you use css to fade the background image into the background color so a visible line does not exist or should I keep adding a gradient to transparency in Photoshop?
您能否使用 css 将背景图像淡化为背景颜色，以便不存在可见线条，还是应该继续在 Photoshop 中为透明度添加渐变？
采纳答案by Lemurr
It is possible - in CSS3 you can set multiple values for background
这是可能的 - 在 CSS3 中，您可以为背景设置多个值
body {
background: #837960 url("https://i.stack.imgur.com/MUsp6.jpg") 0 0 no-repeat;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(130,91,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(130,91,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#825b00',GradientType=0 ); /* IE6-9 */
}However, it will work only in modern browser that supports CSS3
但是，它仅适用于支持 CSS3 的现代浏览器
(code generated via http://www.colorzilla.com/gradient-editor/)
回答by Elizabeth Fuller
Ideally, you should just edit the image so as to have a consistent look across browsers.
理想情况下，您应该只编辑图像，以便在浏览器中具有一致的外观。
While you can have a background gradient, that would appear behind an image, as the background images are placed over background color. In order to have the image look like it is fading into another color, you would need to place another tag on top of that the body such as:
虽然您可以设置背景渐变，但它会出现在图像后面，因为背景图像位于背景颜色之上。为了让图像看起来像是逐渐变成另一种颜色，您需要在主体顶部放置另一个标签，例如：
body { background: url('https://i.stack.imgur.com/MUsp6.jpg') }
div.content {
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}<body>
<div class="content">Example</div>
</body>Or whatever color/positioning combination you would like. A good resource is http://www.colorzilla.com/gradient-editor/
或者您想要的任何颜色/定位组合。一个很好的资源是http://www.colorzilla.com/gradient-editor/
回答by Josh Habdas
Yes it's possible with CSS using the linear-gradient()function with multiple background images:
是的，CSS 可以使用linear-gradient()具有多个背景图像的函数：
body {
background-color: #837960;
background-image: linear-gradient(
to bottom, transparent, #837960
), url("Images/background.jpg");
background-repeat: no-repeat;
}
Specify the gradient as the first image so it gets stacked on top, and use it to fade from transparentat the top to the opaque background-colorat the bottom. This will give the illusion the image underneath is fading into the background without requiring alpha-transparency on the image itself.
将渐变指定为第一个图像，使其堆叠在顶部，并使用它从transparent顶部渐变background-color到底部不透明。这将产生一种错觉，下面的图像正在淡入背景中，而不需要图像本身的 alpha 透明度。
