从CSS设置图像的可能方法的集合
CSS2的:after伪元素或较新的语法::after从CSS3与沿content:属性：
第一项W3C建议：级联样式表，第2级CSS2规范 1998年5月12日
最新的W3C建议：选择器，第3级W3C建议， 2011年9月29日
此方法将内容附加在元素的文档树内容之后。
注意：一些浏览器通过实验content直接在某些元素选择器上渲染属性，甚至不考虑定义以下内容的最新W3C建议：
适用于：: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">
我们将使用呈现内容两者之一的隐藏图像来改变图像背景中的#img1基础上，ID选择通过CSS：
#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中设置自定义标签，但是在没有Javascript或CSS 指导的情况下，Internet Explorer的原始版本无法理解（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:可能会有所帮助）
图形元素表示一些流程内容，可以选择包含标题，这些内容是独立的（如完整的句子），通常从文档的主要流程中引用为单个单元。
元素有效，没有内容，但建议包含<figcaption>。
因此，该元素可用于注释插图，图表，照片，代码清单等。
默认渲染：该元素右对齐，并带有左右填充！
为了包括图像，作者可以使用OBJECT元素或IMG元素。
该data属性是必需的，并且可以具有有效的MIME类型作为值！
<object data="data:x-image/x,"></object>
注意：利用<object>CSS 中的标记的一个技巧是设置一个自定义有效的MimeType，x-image/x然后设置 无数据（值在必需的逗号后无数据,）
默认渲染：300 x 150px，但是可以在HTML或CSS中指定尺寸。
需要具有SVG 功能的浏览器，并具有<image>用于栅格图像的 元素
该width属性默认为300，该height属性默认为150。
与<input>元素type="image"
局限性：
...该元素应显示为按钮状，以表明该元素是一个按钮。
哪个Chrome跟随并在没有文本时呈现4x4px的空白方块
部分解，设置为value=" "：
<input type="image" id="img1" value=" ">
还请注意HTML5.1中即将发布的<picture>元素，该元素目前是工作草案。