在顶部淡出图像 [英] Fade image at the top

问题描述

目前，我有一个垂直图片，如下所示：

Currently, I have a vertical image that looks like this:

我需要的是图像褪色在顶部，使它最终看起来像这样：

What I need is for the image to fade at the top only so that it ends up looking like this:

这是我开始的JSFiddle： http://jsfiddle.net/R6KSM /

Here's the JSFiddle I've started: http://jsfiddle.net/R6KSM/

我设置的CSS简单：

.line {
  height: 500px;
  margin-left: 200px;
  background: url('http://i.imgur.com/UEfCV17.png') repeat-y;
}

.line > .content {
  padding: 20px;
}

请帮助。

推荐答案

您可以使用具有白色到透明渐变的< div> ：

You could use a <div> with a white-to-transparent gradient:

HTML

<div class="line">
    <div class="fadeTop"></div>
    <div class="content">
        This is just a sample paragraph.
    </div>
</div>

CSS

.fadeTop{
    height:20px;width:100%;position:absolute;left:0; top:0;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

（我使用 gradient generator ）

检查： JSFiddle

这篇关于在顶部淡出图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！