从 CSS 设置图像的可能方法的集合
CSS2的:after伪元素或CSS3的较新语法以及属性：::aftercontent:
第一个 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:`](http://www.w3.org/TR/REC-CSS1-961217#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 上不起作用的有限的、不合规的 hack 。
好的候选方法，看结论...
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>s 标签src（但这里有一个 hack），相反我们可以装饰它：
显示代码片段
.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"
Run code snippetHide results
Expand snippet
标准传播后要考虑的良好候选方法。
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">
我们将使用两个_隐藏图像_之一的_渲染内容_，通过 CSS 根据ID_选择器更改图像_背景：#img1
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
注意：它是_实验性的_，仅适用于-mozFirefox 中的前缀，并且仅适用于 overbackground或background-image属性，还需要指定大小。
结论
- 任何语义内容或结构信息都以 HTML 形式存在。
- 样式和表现信息位于 CSS 中。
- 出于 SEO 目的，请勿在 CSS 中_隐藏_有意义的图像。
- 打印时背景图形通常被禁用。
- 可以使用自定义标签并通过 CSS 设置样式，但原始_版本的 Internet Explorer 无法理解]（ IE 无法在没有 Javascript 或 CSS_指导的情况下设置 HTML5 标签样式（使用 shiv） ） 。
- SPA（单页应用程序）根据设计，通常在背景中包含图像
话虽如此，让我们探索一下适合图像显示的 HTML 标签：
元素<li>[HTML4.01+]
**list-style-image**with方法的完美用例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>
Run code snippetHide results
Expand snippet
限制：难以设计（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>中即将推出的元素，目前是一个_工作草案_。
