background-(image|size) の深みへようこそ
TRANSCRIPT
はじめに
この資料はあくまで参考情報です
正式な文書を読みたい場合はhttp://www.w3.org/TR/ 以下にある
文書を読んでいただくようお願いします
background-(image|size)
の深みへようこそ
自己紹介
• kubosh(o|0)_? (株式会社グラニ 所属)
• Twitter: kubosho_
• GitHub: kubosho
• http://blog.kubosho.com
今日話すこと
background-image と background-size の ブラウザでの挙動から
知る仕様
以下を参考にした話をします
• CSS Backgrounds and Borders Module Level 3 - http://www.w3.org/TR/css3-background/
• CSS Backgrounds and Borders Module Level 3 (日本語訳)
- http://www.hcn.zaq.ne.jp/___/WEB/css-backgrounds-ja.html - W3C Editor's Draft の日本語訳
• CSS Image Values and Replaced Content Module Level 3 - http://www.w3.org/TR/css3-images/
• CSS Image Values and Replaced Content Module Level 3 (日本語訳)
- http://www.hcn.zaq.ne.jp/___/WEB/css-images-ja.html - W3C Editor’s Draft の日本語訳
background-image や background-size の 謎のような挙動に
出会ったことはありませんか
自分はあります
複数画像のアニメーションをすることができない
(書き方次第では 何も表示されない)
background ショートハンド
プロパティの値にbackground-size の値を含むと
背景に何も表示されない
具体例
複数画像のアニメーションをすることができない
(書き方次第では 何も表示されない)
クロスフェードアニメーション
.example { width: 400px; height: 200px; animation: crossfade 5s linear 0s infinite alternate; }
@keyframes crossfade { 0% { background-‐image: url("images/foo.png"); } 100% { background-‐image: url("images/bar.png"); } }
Chrome 46.0.2486.0 dev
Firefox 42.0a2
background ショートハンド
プロパティの値にbackground-size の値を含むと
背景に何も表示されない
以下のように書いたものは
.example { background-‐image: url("images/foo.png"); background-‐position: top left; background-‐size: auto auto; }
こう書くこともできる
.example { background: url("images/foo.png") top left / auto auto; }
Chrome 46.0.2486.0 dev
Android 4.2.2 Browser
なぜこうなるのか 仕様を読み解いていきます
複数画像のアニメーションをすることができない
(書き方次第では 何も表示されない)
そもそも background-image は 仕様上はアニメーションが
できない
Firefox の実装が正しい
アニメーションできるプロパティ
• background-color
• background-position
• 単一もしくは複数の値
• background-size
• 値に contain, cover, auto を指定している時除く
background ショートハンド
プロパティの値にbackground-size の値を含むと
背景に何も表示されない
仕様の話
仕様上は background-position
の値指定の後に「/」で区切って
background-size の値指定が できる
実装の話
Android 2系では
background-size に
-webkit- プリフィックスが必要
background ショートハンド プロパティ内に
background-size の値を 含めるとスタイル指定が
無効になる
Android 4.3までは background ショートハンド プロパティの値として
background-size の値を 内包する記法に対応しないため スタイル指定が無効になる
background-size は background ショートハンド
プロパティ内で 指定しないほうが(今は)良い
background-size の安牌
.example { background: url(“images/foo.png") top left no-‐repeat #fff; -‐webkit-‐background-‐size: auto auto; background-‐size: auto auto; }
プリフィックスは面倒なので Autoprefixer を使うのが良い
余談
background-* プロパティの 指定を個別でした後に
background ショートハンド プロパティを指定した場合 値が上書きされる
より深みへ
background-image
CSS Backgrounds and Borders Module Level 3 より background-image
(とその他の背景関連プロパティ)の値にカンマ区切りで 複数の値を指定できるように
なった
複数の値を指定するサンプル
.example { background-‐image: url("images/foo.png"), url("images/bar.png"); }
background-image は 背景に表示する画像を 指定するだけではない
背景のレイヤーの数も background-image で 指定された値の数によって
決まる
背景のレイヤー？
この場合五つのレイヤーがある
.example { background-‐image: url("images/foo.png"), url("images/bar.png"), url("images/baz.png"), url("images/foobar.png"), url(“images/barbaz.png"); /* background-‐repeat の値は五つ指定できる */ background-‐repeat: no-‐repeat, no-‐repeat, no-‐repeat, no-‐repeat, no-‐repeat; }
背景のレイヤーの数によって background-* プロパティの 値を指定できる数が変わる
背景のレイヤーの数以上に background-* プロパティに 値を指定した場合はどうなる？
.example { background-‐image: url("images/foo.png"), url("images/bar.png"), url("images/baz.png"), url("images/foobar.png"), url("images/barbaz.png"); background-‐repeat: no-‐repeat, no-‐repeat, no-‐repeat, no-‐repeat, no-‐repeat, no-‐repeat; }
背景のレイヤーの数以上に background-*プロパティに値を指定した場合は レイヤーの数以降の 指定が無視される
.example { background-‐image: url("images/foo.png"), url("images/bar.png"), url("images/baz.png"), url("images/foobar.png"), url("images/barbaz.png"); background-‐repeat: no-‐repeat, no-‐repeat, no-‐repeat, no-‐repeat, no-‐repeat, no-‐repeat; }
.example { background-‐image: url("images/foo.png"), url("images/bar.png"), url("images/baz.png"), url("images/foobar.png"), url(“images/barbaz.png"); /* 六個目の値は無視されるので、 実質以下のような値指定になる */ background-‐repeat: no-‐repeat, no-‐repeat, no-‐repeat, no-‐repeat, no-‐repeat; }
背景のレイヤーの数より background-*プロパティの値指定の数が足りない場合は？
.example { width: 800px; height: 800px; background-‐image: url("images/foo.png"), url("images/bar.png"), url("images/baz.png"), url("images/foobar.png"); background-‐repeat: repeat-‐x, no-‐repeat; background-‐position: top 0 left 0, top 200px left 0, top 400px left 0, top 600px left 0; }
それまでに指定した 値の指定が繰り返される
.example { width: 800px; height: 800px; background-‐image: url("images/foo.png"), url("images/bar.png"), url("images/baz.png"), url("images/foobar.png"); background-‐repeat: repeat-‐x, no-‐repeat, repeat-‐x, no-‐repeat; background-‐position: top 0 left 0, top 200px left 0, top 400px left 0, top 600px left 0; }
背景のレイヤーは background-image の値で 先に指定したものが上に 後に書いたものほど下に 重なって表示される
background-size
contain, cover, auto
という値について
contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width
and its height can fit inside the background positioning area.
(Google 翻訳) 幅と高さの両方が、背景配置領域内に収まることができるように、最大の大きさに、（もしあれば）その固有の縦横比を維持しながら、画像を拡大縮小。
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the
smallest size such that both its width and its height can completely cover
the background positioning area.
(Google 翻訳) 最小のサイズに、（もしあれば）その固有の縦横比を維持しながら、画像を拡大縮小幅と高さの両方が完全にバックグラウンド配置領域を覆う。
background-size: contain; と指定すると要素内に収まる
ように表示される 繰り返し指定がある場合は 繰り返して表示される
background-size: cover; と指定すると画像の大きさに 関係なしに隙間なく
要素に収まって表示される
どちらの指定でも アスペクト比は 維持される
auto
background-size の 幅と高さのどちらかに 指定している場合
画像の内在サイズを使って 幅もしくは高さが算出される
内在サイズ？
画像などのオブジェクトが 持っている縦・横幅・縦横比
の総称
ラスター形式の画像 (JPEG, GIF, PNG…)は 縦・横幅・縦横比が
揃っている
ベクター形式の画像 (SVG) は 縦横比のみという場合や 縦・横幅のどちらかしかない
場合がある
グラデーションは 内在サイズを持たない
画像などのオブジェクトが 持っている縦・横幅・縦横比
の総称
というのを覚えておいて ください
元に戻って background-size の
auto 値の話
画像の内在サイズが ない場合は 100% になる
幅と高さの両方に 指定されていて
画像の内在サイズが ある場合は それが使われる
画像の内在サイズが ない場合は contain になる
まとめ
W3C の仕様と ブラウザの実装は 一部異なる場合がある
CSS のプロパティと値の 書き方に気を使う
クロスフェードアニメーション
.example { width: 400px; height: 200px; animation: crossfade 5s linear 0s infinite alternate; }
@keyframes crossfade { 0% { background-‐image: url("images/foo.png"); } 100% { background-‐image: url("images/bar.png"); } }
Firefox 42.0a2
変更後
.example { width: 400px; height: 200px; background-‐image: url("images/foo.png"); animation: crossfade 5s linear 0s infinite alternate; }
@keyframes crossfade { 0% { background-‐image: url("images/foo.png"); } 100% { background-‐image: url("images/bar.png"); } }
Firefox 42.0a2
とりあえず画像は表示される
クロスフェードしたい場合は？
擬似要素と opacity を 使う
http://codepen.io/geckotang/pen/MagNoK?
editors=110
background-image は 背景画像を指定する だけではなく
背景のレイヤーの数にも 影響する
background-size の contain, cover は
同じように見えて違うので 使い分け大事
皆さんも background-image
background-size
の深みに入りましょう
ありがとうございましたhttps://twitter.com/kubosho_ https://github.com/kuboshohttp://blog.kubosho.com
画像の引用元一覧 その一
• Cat show: Form | Flickr© Tomi Tapio K (CC-BY 2.0)https://www.flickr.com/photos/tomitapio/4305303148
• Nasty cat ! | Flickr© Hannibal Poenaru (CC-BY-SA 2.0)https://www.flickr.com/photos/poenaru/1304953088/
画像の引用元一覧 その二
• Cat | Flickr© Chris Erwin (CC-BY 2.0)https://www.flickr.com/photos/crerwin/1089567053/
• Cat | Flickr© Martie Swart (CC-BY 2.0)https://www.flickr.com/photos/martie1swart/6297998606/