背景图像 css 顶部和底部的透明渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20423394/
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
Transparent gradient for top and bottom of background image css
提问by Schonge
Is it possible to place transparent gradients over both the top and the bottom of a background image? At the moment I can only find it being done on one or the other.
是否可以在背景图像的顶部和底部放置透明渐变？目前我只能发现它是在一个或另一个上完成的。
UPDATE:
更新：
Tried by putting 2 with in the area that the background image is being applied then used two classes(one the reverse of the other to try and create the desired effect but it didn't quite workout. I'd also like it if possible if it didn't affect any other content and it's positioning within the section it is being applied.
尝试将 2 with 放在正在应用背景图像的区域，然后使用两个类（一个与另一个相反以尝试创建所需的效果，但它并没有完全锻炼。如果可能的话，我也喜欢它它不会影响任何其他内容，并且它位于它正在应用的部分中。
CSS
CSS
.picture-gradient {
z-index: 1;
height: 50px;
width: auto;
position: relative;
background: -webkit-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0));
background: -o-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0));
background: -moz-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0));
background: linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0));
padding: 15px;
margin: -15px;
}
.picture-gradient2 {
z-index: 1;
height: 50px;
width: auto;
position: relative;
background: -webkit-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1));
background: -o-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1));
background: -moz-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1));
background: linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1));
padding: 15px;
margin: -15px;
}
HTML(Basic)
HTML（基础）
<div id="photo-place-holder">
<div class="picture-gradient2"></div>
enter code here
<div>
<p>Text</p>
<p>More Text</p>
</div>
<div id="search-bar2">
<form class="form-wrapper2 searchbar2">
<table id="search-table" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" placeholder="Search for activities and places" required /></td>
<td><button type="submit"><img src="Logos/search_white_48px.png" height="28px" width="28px" /></button></td>
</tr>
</table>
</form>
</div>
<div id="search-categories"></div>
<div id="photo-details"></div>
<div class="picture-gradient2"></div>
</div>
回答by xec
You can have multiple stops in a gradient, so if you wanted the top 10% to fade to transparent and the bottom 10% to fade back, you could do something like this:
您可以在渐变中设置多个停靠点，因此如果您希望顶部 10% 淡入透明，底部 10% 淡出，您可以执行以下操作：
background-image: linear-gradient(
to bottom,
rgba(64, 64, 64, 1) 0%,
rgba(64, 64, 64, 0) 10%,
rgba(64, 64, 64, 0) 90%,
rgba(64, 64, 64, 1) 100%
);
Demo with <img>tag: http://jsfiddle.net/sh6Hh/or without the extra <div>: http://jsfiddle.net/sh6Hh/262/
带<img>标签的演示：http: //jsfiddle.net/sh6Hh/或没有额外的<div>：http: //jsfiddle.net/sh6Hh/262/
Demo with css background picture: http://jsfiddle.net/sh6Hh/1/
使用css背景图片演示：http: //jsfiddle.net/sh6Hh/1/
回答by gaynorvader
Something like this?
像这样的东西？
JsFiddle
提琴手
CSS
CSS
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(41,137,216,1) 50%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(41,137,216,1) 50%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */
Generated by http://www.colorzilla.com/gradient-editor/
