content(url)で画像表示
contentでurlを指定すれば画像を表示することができる。
ただし、これができるのはWebKit系ブラウザのChromeやSafariなどでIEやFirefoxでは表示できない。
このような書き方をすると「え？contentならIEやFirefoxでも画像は使用できるのでは？」と思う方もいるかもしれないがIEやFirefoxで画像を表示できるのは擬似要素(:after, :before)を使用したcontentのときだけでcontent単体の指定では画像を表示できない。
しかも擬似要素を使用した場合と使用しない場合とでは画像の表示のされかたが異なるため注意が必要だ。
content画像の表示のされ方の違い
例えば下記のように擬似要素:afterを使用して画像を表示した場合、画像は要素のwidthとheightではなく元の画像ファイルのサイズで表示される。
対して擬似要素を使用せず、直せずcontentで画像を表示した場合はwidthとheightの大きさに合わせて表示される。
そのためbackgroundとは異なりtext-indent:-9999pxやbackground-sizeの指定が不要になるので記述するプロパティを少なくできるメリットも。
ただし、前述したとおりIEやFirefox(モバイル版を含む)では使用できないためスマートフォン専用サイトでも使用できないのが悩みどころ。
もし使用できるとすれば推奨環境にWebKit系ブラウザが指定されているスマートフォン向けブラウザゲームくらいか。
まとめ
- content単体だとWebKit系ブラウザのみで使用可能
- 擬似要素と一緒に使用するならIE8以上を含むほとんどのブラウザで使用可能
- content単体だとbackgroundの代わりとして使用できる
- ただし、content単体だと要素にテキストがある場合はテキストが非表示になる
