css 顶部透明固定,背景图像css顶部和底部的透明渐变

是否可以在背景图像的顶部和底部放置透明渐变？目前我只能在其中一个上找到它。

更新

尝试将2放在应用背景图像的区域，然后使用两个类(一个与另一个相反，尝试创建所需的效果，但它没有完全锻炼。我也喜欢它如果可能的话，如果它不影响任何其他内容，并且它在正在应用的部分内定位。

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(基本)

enter code here

Text

More Text