有没有可能在背景图片的顶部和底部都放置透明渐变？目前我只能找到它被放置在其中之一。
更新：
尝试在应用背景图片的区域内放置2个div，然后使用两个类（一个是另一个的反转），试图创建所需的效果，但结果不太理想。如果可能的话，希望它不会影响任何其他内容及其在所应用的部分中的定位。
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（基础知识）
<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>