投稿日：2015年9月3日 更新日：
今回はCSS3から可能になったbackgroundプロパティでの複数指定をご紹介します。
以前は1要素に指定出来る背景画像は1つでしたので複数の背景画像を使用したい場合には要素を入れ子等にして対応していましたが、CSS3からはカンマ区切りで複数指定が出来る様になったのでhtmlソースの簡略化が可能になりました！
<style>
.demo {
background-image:url(CSS3.png), url(CSS3.png);
background-repeat:no-repeat, no-repeat;
background-position:left top, right bottom;
background-size:50% auto, 200px auto;
}
</style>※非対応プラウザではデモが正常に表示されない場合があります。
この他のCSS3の便利な使い方もご覧下さい。
知ってそうで知らないCSS3の便利な使い方【その3：box系プロパティ】
関連記事
phpフレームワークlaravel4でデータベースを操作してみました。
phpのフレームワークlaravel4でデータベースの操作をためしました。 laravel4では、「Eloquent ORM」が含まれており、簡単にデータベースの操作が可能です。 1. 今回ブログの記 …
【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザ
Webデザインを制作する中で、写真素材を使用することが多々あります。 これらの素材にひと手間加えることで、写真の魅力がグッと加わったり、 サイトの印象を変えることができたり、ポイントにもなったりします …
多言語サイトの作り方は？デザインやビジネスにおける重要性について徹底解説
貴社のWEBサイトは、言葉の壁に阻まれていませんか？グローバル市場で成功を収めている企業には、ある共通点があります。それは、多言語サイトの活用です。驚くべきことに、多言語サイトを導入した企業の70%以 …
手軽に雰囲気を変える！無料英字webフォントのまとめ -素敵な明朝フォント編-
webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第二弾として「素敵な明朝英字フォント …
movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …
2024/11/15
Webアクセシビリティってそもそもなんだっけ？ 誰もがWebの恩恵に触れられる社会へ
2024/10/30
ホームページ制作にSEO対策は重要！集客で困らないためのポイントを徹底解説
CONTACT US
