【HTML/CSS】CSS3でグラデーションと背景画像を同時に使う

CSS3では1つの要素に対して、複数の背景を指定することができます。

#box{
background-image: url(img/imege1.png), url(img/imege2.png), url(img/imege3.png), url(img/imege4.png);
}

とすれば複数の背景画像をPhotoshopのレイヤーのように重ねて使うことができます。

CSS3から新たにグラデーションも指定できるようになりましたが、グラデーションと背景画像を別々に指定するとうまく表示されません。

#box{
background-image: url(img/imege1.gif), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff));
background-image: url(img/imege1.gif), -moz-linear-gradient(top, #000000, #ffffff);
}

という風にグラデーションを一つのレイヤーと考え、背景画像のプロパティ”background-image”の中で指定する事で、グラデーションと背景画像を同時に使う事ができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>