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

【问题标题】：Transparent gradient for top and bottom of background image css背景图像css顶部和底部的透明渐变
【发布时间】：2013-12-06 12:01:45
【问题描述】：

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

更新：

尝试在应用背景图像的区域中放置 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>

【问题讨论】：

是的，只需添加更多站点。你能展示你尝试过的东西吗？（你的代码呢？）
@xec 我已更新问题以包含代码！

标签： css linear-gradients gradient

【解决方案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/

【讨论】：

快速警告：这在 IE 9 及更低版本中不起作用。

【解决方案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/生成

【讨论】：