皆様、お盆ラストとなりましたが、いかがお過ごしですか?
私は早起きしてブログを書いています。。が、、やはり、
空手の練習がないと筋トレしないので、筋トレ頑張ってやろうかと思います。
実家で筋トレ頑張ります。
しかし、なぜか、筋肉つかないんですヽ(;▽;)ノ
ぶよぶよ、いつか男性ホルモンの注射を笑
さて、そしてら前回、background-size: cover;や、 background-size: contain;
のお話をしました。
今回はじゃじゃーん!!!
複数の背景画像を指定する
です。めっちゃ簡単です、background-image: url(ほにゃらら.png),url(ほにゃらら.png),;
で左側から順番に表示されていきます。
それではpngデータを用意しますね。
こんな感じのデータです。
じゃあ簡単にデモってみますね☆
<div style=”width: 300px; height: 300px; background-image: url(http://aliceplanblog.com/wp-content/uploads/2014/08/slime.png),url(http://aliceplanblog.com/wp-content/uploads/2014/08/Windows_logo.png); background-position:center; background-repeat: no-repeat;”></div>
ばこんこんな感じです、
なんか豪華なスライムですね笑
実は今までタグ書いてきましたが、background:;
半角で区切るだけで、値はかけるのです、
これって、タグの省略なのでかなり便利ですし、
たぶん、色々なタグがそういうことなんでしょう、
また一つ勉強になりましたね☆
※注意事項が一つあります
・実数の場合は[,]で区切ること、imageのurlはスラッシュですることです、
ブラウザによっては色々あるようなので、しっかり検証しながらショートできれいなコードを書けるようになれば嬉しいですね☆
次回は初歩的なフロートです!
お楽しみに!!
今から、お墓参りしてくるよ~~
みんなも先祖を大事にしてね!!
やっぱ、先祖いないと今の自分はいないからね!!笑
それでは!!