css - 背景图像 css 顶部和底部的透明渐变

Question

是否可以在背景图像的顶部和底部放置透明渐变？目前我只能发现它是在一个或另一个上完成的。

更新:

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

<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>

Answer 1

您可以在渐变中设置多个停靠点，因此如果您希望顶部 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%
);

演示 <img>标签:http://jsfiddle.net/sh6Hh/或者没有额外的 <div> : http://jsfiddle.net/sh6Hh/262/

带有CSS背景图片的演示:http://jsfiddle.net/sh6Hh/1/