1

中央のグラデーションを明るい色から暗い色にフェードさせる方法を知っている人はいますか?

これが私がこれまでにできたことです

background-color:#303030;
background-image:-moz-linear-gradient(left,#282828,#616161,#303030);
background-image:-webkit-linear-gradient(left,#282828,#616161,#303030);
background-image:-o-linear-gradient(left,#282828,#616161,#303030);
background-image:-ms-linear-gradient(left,#282828,#616161,#303030);
background-image:linear-gradient(left,#282828,#616161,#303030);

ここに画像の説明を入力

4

3 に答える 3

2

左は線形グラデーションではなく、放射状に見えます。オフセットを使用して行う方法の例を次に示します: http://codepen.io/mastastealth/pen/ocIaz

基本的には次のようなものを使用します (適切なプレフィックスを適用し、古い IE ではサポートされていません):

background: radial-gradient(center 20px, circle, #616161 0%, #616161 20%, #282828 100%);
于 2012-08-29T20:45:12.827 に答える
1

「上部で約20ピクセルのオフセット」は、グラデーションを20ピクセル下にシフトすることを意味すると思いますか？その場合は、div のような要素を作成し、グラデーションを適用してから、約 20 ピクセル下に配置する必要があります。

このJSFiddleを参照してください。これは、さまざまな方法で実現できます。ここでは、絶対配置を使用しました。

<div id="abc"></div>

#abc {
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 0;
    right: 0;
    /* gradient here */
}
于 2012-08-29T20:15:11.377 に答える
0

AFAICT 単一のグラデーションでこれを行うことはできませんが、2 つのネストされた要素の 2 つのグラデーションで行うことができます。グラデーションは画像全体を塗りつぶしますが、透明なカラー ストップを指定できます。

外側の要素は、中央の色にフェードする「右へ」の線形グラデーションで左側を処理します。内側の要素は、透明にフェードする「左へ」のグラデーションで右側を処理し、左側のグラデーションを表示します。

<div class="gradient">
    <div class="gradient-inner">
    Content
  </div>
</div>

.gradient {
  background-image: linear-gradient(
    to right,
    red,
    green 40px
  );
  height: 200px;
  width: 100%;
}
.gradient-inner {
  background-image: linear-gradient(
    to left,
    red,
    green 40px,
    rgba(0, 0, 0, 0) 40px
  );
  height: 200px;
  width: 100%;
}
于 2014-07-04T20:52:54.353 に答える