CSSから画像を設定するための可能なメソッドのコレクション
CSS2の:after擬似要素または新しい構文::afterからCSS3と共にcontent:プロパティ：
最初のW3C勧告：カスケードスタイルシート、レベル2 CSS2仕様 1998年5月12日
最新のW3C勧告：セレクターレベル3 W3C勧告 2011年9月29日
このメソッドは、要素のドキュメントツリーコンテンツの直後にコンテンツを追加します。
注：一部のブラウザーは、以下を定義する最新のW3C勧告でさえも無視して、一部の要素セレクター上にプロパティを直接実験的にレンダリングします。content
適用対象：:beforeおよび:after疑似要素
CSS2構文（前方互換）：
.myClass:after {
content: url("somepicture.jpg");
}
CSS3セレクター：
.myClass::after {
content: url("somepicture.jpg");
}
デフォルトのレンダリング：元のサイズ（明示的なサイズ宣言に依存しません）
この仕様では、：beforeおよび：afterと置き換えられた要素（HTMLのIMGなど）との相互作用を完全には定義していません。これは、将来の仕様でより詳細に定義されます。
しかし、これを書いている時点でさえ、<IMG>タグによる振る舞いはまだ定義されておらず、ハッキングされ、非標準に準拠した方法で使用<img>できますが、での使用はお勧めしません！
素晴らしい候補メソッド、結論を参照してください...
CSS1の
background-image:プロパティ：
最初のW3C勧告：カスケードスタイルシート、レベル1 1996年12月17日
このプロパティは、要素の背景画像を設定します。背景画像を設定するときは、画像が利用できないときに使用される背景色も設定する必要があります。画像が利用可能な場合、背景色の上にオーバーレイされます。
このプロパティはCSSの最初から存在していますが、それでも輝かしい言及に値します。
デフォルトのレンダリング：元のサイズ（スケーリングできず、配置のみ）
ただし、
CSS3のbackground-size:プロパティは、複数のスケーリングオプションを許可することで改善されました。
最新のW3Cステータス：候補の推奨 CSS背景と境界線モジュールレベル3 2014年9月9日
[length> | <percentage> | auto ]{1,2} | cover | contain
ただし、このプロパティを使用しても、コンテナのサイズによって異なります。
まだ良い候補の方法です、結論を見てください...
CSS2のlist-style:プロパティと一緒にdisplay: list-item：
最初のW3C勧告：カスケードスタイルシート、レベル2 CSS2仕様 1998年5月12日
list-style-image: プロパティは、リストアイテムマーカー（箇条書き）として使用される画像を設定します
リストのプロパティは、リストの基本的な視覚的フォーマットを記述します。これにより、スタイルシートでマーカーのタイプ（画像、グリフ、または番号）を指定できます
display: list-item—この値により、要素（<li>HTMLなど）が主要なブロックボックスとマーカーボックスを生成します。
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
短縮CSS：（<list-style-type> <list-style-position> <list-style-image>）
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
デフォルトのレンダリング：元のサイズ（明示的なサイズ宣言に依存しません）
制限：
継承により、「リストスタイル」の値がOL要素とUL要素からLI要素に転送されます。これは、リストスタイル情報を指定するための推奨方法です。
作成者がリストマーカーの個別のスタイル（色、フォント、配置など）を指定したり、位置を調整したりすることはできません。
<img>要素タイプ間で変換を行うことができないため、この方法もタグには適していません。これは、Chromeで機能しない、準拠していない制限されたハックです。
良い候補方法、結論を参照してください...
CSS3のborder-image:プロパティの推奨：
最新のW3Cステータス：候補の推奨 CSS背景と境界線モジュールレベル3 2014年9月9日
かなり特殊な方法でのサイズの指定（この使用例では定義されていません）とこれまでのフォールバック境界プロパティ（例:)に依存する背景タイプのメソッド： border: solid
スクロールメカニズムが発生しない場合でも、最初の画像は祖先またはビューポートによってクリップされる可能性があることに注意してください。
この例は、右下隅の装飾としてのみ構成されている画像を示しています。
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
適用対象：内部テーブル要素を除くすべての要素 border-collapse: collapse
それでものタグを変更することはできません（ただし、ここではハックです）。代わりに、次のように装飾できます。<img>src
.myClass {
border: solid;
border-width: 0 96px 96px 0;
border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png")
0 100% 100% 0;
}
<img width="300" height="120"
src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg"
class="myClass"
標準が普及した後に検討すべき良い候補の方法。
CSS3のelement()表記ワーキングドラフトも言及する価値があります。
注：element()関数は、参照された要素の外観のみを再現し、実際のコンテンツとその構造は再現しません。
<div id="img1"></div>
<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">
2つの非表示画像のいずれかのレンダリングされたコンテンツを使用して、CSS経由のIDセレクターに基づいて画像の背景を変更します。#img1
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
注：これは実験的なものであり-moz、Firefox のプレフィックスでのみ機能し、over backgroundまたはbackground-imageプロパティでのみ機能します。サイズの指定も必要です。
結論
- セマンティックコンテンツまたは構造情報はすべてHTMLで送られます。
- スタイリングとプレゼンテーションの情報はCSSで送られます。
- SEOの目的で、CSSで意味のある画像を非表示にしないでください。
- 印刷時には、通常、背景のグラフィックは無効になっています。
- カスタムタグを使用してCSSからスタイルを設定できますが、Internet ExplorerのプリミティブバージョンはJavascriptまたはCSS ガイダンスなしでは理解できません（IEがHTML5タグをスタイルしない（shivを使用））。
- SPA（単一ページアプリケーション）は、通常、背景に画像を組み込んでいます。
それでは、画像の表示に適したHTMLタグを見てみましょう。
<li>要素[HTML4.01 +]
list-style-imagewith display: list-itemメソッドの完璧なユースケース。
<li>要素は、空にすることができ、可能にコンテンツを流し、さえ省略することが許されます</li>終了タグを。
.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}
<ul class="bulletPics">
<li id="img1">movie</li>
<li id="img2">earth</li>
<li id="img3">kiwi</li>
</ul>
制限：スタイルが難しい（width:またはfloat:役立つ可能性がある）
figure要素はフローコンテンツを表し、オプションでキャプションが付いており、完全な文のように自己完結型であり、通常、ドキュメントのメインフローから単一のユニットとして参照されます。
要素はコンテンツなしで有効ですが、を含めることをお勧めします<figcaption>。
この要素を使用して、イラスト、図、写真、コードリストなどに注釈を付けることができます。
デフォルトのレンダリング：要素は右揃えで、左と右の両方にパディングされます！
画像を含めるには、作成者はOBJECT要素またはIMG要素を使用できます。
このdata属性は必須であり、有効なMIMEタイプを値として持つことができます！
<object data="data:x-image/x,"></object>
注：<object>CSS のタグを使用するコツは、カスタムの有効なMimeType を設定し、 x-image/xその後にデータがないことです（必要なカンマの後に値にデータがありません,）。
デフォルトのレンダリング：300 x 150ピクセル。ただし、サイズはHTMLまたはCSSで指定できます。
SVGニーズ対応ブラウザがしてあり <image>、ラスタ画像の要素を
width属性のデフォルト値300、およびheightへの属性のデフォルトは150。
<input>を持つ要素type="image"
制限：
...要素はボタンのように表示され、要素がボタンであることを示します。
どのChromeが続き、テキストがない場合は4x4pxの空の四角形をレンダリングします
部分解、セットvalue=" "：
<input type="image" id="img1" value=" ">
また、現在作業中のドラフト<picture>であるHTML5.1の次の要素にも注意してください。