CSS3に関するネタです。
グラデーションと背景画像を同時に指定しようとCSSを編集したところ、思った通りに動かなくて地味に悩みました…でも少し記述方法を変えたら動いたので、備忘録として記事にしておきます。
グラデーションと背景画像を同時に～というのはこんな感じです。
では、上のような表現をするための記述を考えてみましょう。
間違った記述方法
/* IE */
background: -ms-linear-gradient(top, #FFF, #000) , url(xxx.png) ;
/* Mozilla */
background: -moz-linear-gradient(top, #FFF, #000) , url(xxx.png) ;
/* Opera */
background: -o-linear-gradient(top, #FFF, #000) , url(xxx.png) ;
/* Webkit */
background: -webkit-linear-gradient(top, #FFF, #000) , url(xxx.png) ;
/* W3C */
background: linear-gradient(top, #FFF, #000) , url(xxx.png) ;
残念ながらこの記述では動きません。
「色,画像」という順番で書きたいところなんですが、グラデーションと背景画像を同時に指定するためにはプロパティの並びを変えてあげる必要があります。
正しい記述方法
/* IE */
background: url(xxx.png) , -ms-linear-gradient(top, #FFF, #000) ;
/* Mozilla */
background: url(xxx.png) , -moz-linear-gradient(top, #FFF, #000) ;
/* Opera */
background: url(xxx.png) , -o-linear-gradient(top, #FFF, #000) ;
/* Webkit */
background: url(xxx.png) , -webkit-linear-gradient(top, #FFF, #000) ;
/* W3C */
background: url(xxx.png) , linear-gradient(top, #FFF, #000) ;
つまり
background: 画像の指定 , グラデーションの指定;
というわけです。
これでグラデーションと背景画像を同時に指定することができます。
やったね！
関連するかもしれない記事
