cssで背景画像とグラデーションを同時に指定する方法_ブログ_zanmai.net

webサイトを作成の際、１つの要素にグラデーションと背景画像を両立させたい。
この時、下記のコードを使える。

/* W3C */ 
background: url(yourImg.png) , linear-gradient(top, #eeeeee 0%, #fefefe 100%);
/* IE */ 
background: url(yourImg.png) , -ms-linear-gradient(top, #eeeeee 0%, #fefefe 100%);
/* Mozilla */ 
background: url(yourImg.png) , -moz-linear-gradient(top, #eeeeee 0%, #fefefe 100%);
/* Opera */ 
background: url(yourImg.png) , -o-linear-gradient(top, #eeeeee 0%, #fefefe 100%);
/* Webkit */ 
background: url(yourImg.png) , -webkit-linear-gradient(top, #eeeeee 0%, #fefefe 100%);

つまり、画像とグラデーションを同時に指定するとしたら、

background: 画像の指定 , グラデーションの指定;

の順で指定できます。
以上、メモを。

生活三昧@zanmai.net