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/

Answer 2

这样的东西？

的jsfiddle

http://jsfiddle.net/r3wN8/

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

由http://www.colorzilla.com/gradient-editor/生成

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

2 个答案:

的jsfiddle

CSS