web-dev-qa-db-ja.com

グラデーション付きの透明な背景画像

今日は、divの左上にのみ配置される透明なPNG背景を設計していました。divの残りの部分は、PNGのすべての透明な領域とdiv自体の残りのグラデーション背景を維持します。

私が働くかもしれないと思ったコードを通して説明する方が良いかもしれません：

#mydiv .isawesome { 
    /* Basic color for old browsers, and a small image that sits in the top left corner of the div */
    background: #B1B8BD url('../images/sidebar_angle.png') 0 0 no-repeat;

    /* The gradient I would like to have applied to the whole div, behind the PNG mentioned above */
    background: -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADB2B6), color-stop(100%,#ABAEB3));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADB2B6', endColorstr='#ABAEB3',GradientType=0 );
}

私が見つけたのは、ほとんどのブラウザがどちらかを選択することです。ほとんどのブラウザは、CSSファイルのさらに下からグラデーションを選択します。

ここにいる人の中には「作成しているPNGにグラデーションを適用するだけ」と言う人もいますが、divは動的な高さを維持するため、理想的ではありません。この勾配はessentialではないことを知っていますが、あなたが考えたことをy'allに尋ねる価値があると思いました。

背景の残りの部分をグラデーションとして保持しながら背景画像を作成することは可能ですか？

cssimagebackgroundcss3gradient
25
Will D. White

CSSグラデーションは、実際には イメージ値 であり、一部の人が期待するようなカラー値ではないことに注意してください。したがって、background-image具体的に、およびbackground-color、またはbackground全体の略記。

基本的に、あなたが本当にやろうとしているのは、背景画像のレイヤー化two：グラデーション上のビットマップ画像です。これを行うには、同じ宣言で両方を指定し、コンマで区切ります。最初に画像を指定し、次にグラデーションを指定します。背景色を指定した場合、その色は常に一番下の画像の下に描画されます。つまり、グラデーションでうまくカバーされ、フォールバックの場合でも機能します。

ベンダープレフィックスを含めるため、すべてのプレフィックスに1回、プレフィックスなしに1回、フォールバックに1回（勾配なし）これを行う必要があります。他の値を繰り返す必要を回避するには、手書きプロパティを使用します1 backgroundの短縮形の代わりに：

#mydiv .isawesome { 
    background-color: #B1B8BD;
    background-position: 0 0;
    background-repeat: no-repeat;

    /* Fallback */
    background-image: url('../images/sidebar_angle.png');

    /* CSS gradients */
    background-image: url('../images/sidebar_angle.png'), 
                      -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
    background-image: url('../images/sidebar_angle.png'), 
                      -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
    background-image: url('../images/sidebar_angle.png'), 
                      linear-gradient(to bottom, #ADB2B6, #ABAEB3);

    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6', endColorstr='#ABAEB3', GradientType=0);
}

残念ながら、これはIEでグラデーションにfilterを使用し、常にペイントするoverバックグラウンド。

IEの問題を回避するには、filterと背景画像を別々の要素に配置します。ただし、CSS3の複数の背景のパワーは不要になります。これは、すべてのブラウザーに対して階層化を行うことができるためです。しかし、これはトレードオフの関係にあります。標準化されたCSSグラデーションを実装しないIEのバージョンをサポートする必要がない場合は、心配する必要はありません。

1技術的には、background-positionおよびbackground-repeat宣言は、両方のレイヤーに適用されます。これは、クランプではなく値を繰り返すことでギャップが埋められるためですが、background-positionはその初期値であり、background-repeatは、要素全体をカバーするグラデーションでは問題になりません。あまり重要ではありません。階層化された背景宣言の処理方法の詳細については、 こちら をご覧ください。

41
BoltClock

透明度とグラデーション を使用できます。グラデーションは透明度をサポートします。たとえば、複数の背景を積み重ねるときにこれを使用して、背景画像にフェード効果を作成できます。

background: linear-gradient(to right, rgba(255,255,255,0) 20%,
              rgba(255,255,255,1)), url(http://foo.com/image.jpg);

enter image description here

8
J.C. Gras

ここでは、画像とグラデーションの順序が非常に重要です。これを明確にしたいと思います。グラデーション/画像の組み合わせは、次のように最適に機能します...

_background: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');
_

_background-image_も機能します...

_background-image: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');
_

勾配が最初に来る必要があります...ただし、ここでの絶対的なキーは、グラデーションが少なくとも 1 RGBA色を使用することです...色を透明にする必要があります。 （rgba(20,20,20,***0.5***)）。 cssに最初にグラデーションを配置すると、グラデーションが画像の上に配置されるため、RGBAsのアルファ設定を低くするほど、画像が見やすくなります。

一方、逆の順序を使用する場合、PNGには、グラデーションのように透明なプロパティが必要です。画像は一番上に表示されるため、PNGをアルファ領域のあるフォトショップで24ビットとして保存するか、アルファ領域のある花火で32ビットとして保存する必要があります（または、gifであると推測します... barf）。下のグラデーション。この場合、グラデーションにはHEX RGBまたはRGBAを使用できます。

ここでの主な違いは外観です。画像を上にすると、より鮮やかになります。下にあるときは、画像編集ソフトウェアで編集したり保存したりする代わりに、ブラウザでRGBA値を調整して目的の効果を得ることができます。

これがお役に立てば幸いです。

8
Brendan Wolfe

これは、複数のバックグラウンド構文を使用して可能です：

.example3 {
    background-image: url(../images/plus.png), -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b);
    background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}

これについては Here's One Solution で読みました。

0
Chris Peckham