0

現在、次のような縦長の画像があります。

ここに画像の説明を入力

私が必要とするのは、画像が上部だけでフェードして、最終的に次のようになることです。

ここに画像の説明を入力

これが私が始めた JSFiddle です: 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;
}

助けてください。

4

1 に答える 1

2

<div>白から透明へのグラデーションで a を使用できます。

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%);
}

（この特定の状況では勾配ジェネレーターを使用しました）

それをチェックしてください：JSFiddle

于 2013-07-17T09:24:14.787 に答える