是否可以在CSS中设置src属性值? 在大多数情况下，我们这样使用它:
<img src="pathTo/myImage.jpg" />
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
我想知道是否有一种方法可以做到这一点，而不使用CSS中的background或background-image属性。
当前回答
从CSS中设置图像的可能方法的集合
CSS2的:after伪元素或来自CSS3的新语法::after以及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**'s [`background-image:`](http://www.w3.org/TR/REC-CSS1-961217#background-image) property:
第一个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 -这个值使一个元素(例如HTML中的<li>)生成一个主块框和一个标记框。
.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日
一个后台类型的方法，它依赖于以一种相当特殊的方式(没有为这个用例定义)指定大小和到目前为止的回退边界属性(例如。边界:固体):
请注意，即使它们从来没有导致滚动机制，开始 图像仍然可以被祖先或视口剪切。
这个例子说明了图像只作为右下角的装饰组成:
.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(但这里有一个hack)，相反，我们可以装饰它:
.myClass { 边界:固体; 边框宽度: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 " 类= " 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">
我们将使用两个隐藏图像之一的渲染内容，通过CSS根据ID选择器更改#img1中的图像背景:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
注意:它是实验性的，只适用于Firefox中的-moz前缀，只适用于背景或背景图像属性，还需要指定大小。
现场演示
结论
任何语义内容或结构信息都放在HTML中。 样式和表示信息放在CSS中。 为了SEO的目的，不要在CSS中隐藏有意义的图像。 背景图形通常在打印时禁用。 自定义标签可以使用和样式从CSS，但原始版本的Internet Explorer不理解](IE没有样式化HTML5标签(与shiv))没有Javascript或CSS指导。 根据设计，SPA(单页应用程序)通常在背景中包含图像
话虽如此，让我们来探索适合图像显示的HTML标签:
<li> element [HTML4.01+]
列表风格的图像与显示的完美用例:列表项方法。
<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类= " bulletPics " > 电影<李id = " img1 " > < /李> 地球<李id = " img2 " > < /李> <李id = " img3 " >猕猴桃李< / > < / ul >
限制:难以设置样式(width:或float:可能有帮助)
<figure>元素[HTML5+]
figure元素表示一些流内容，可选带有标题，这些内容是自包含的(就像一个完整的句子)，通常作为文档主线中的单个单元引用。
元素没有内容是有效的，但是建议包含<figcaption>。
元素可以用来注释插图、图表、照片、代码清单等。
默认呈现:元素是右对齐的，有左右填充!
图现场演示
<object>元素[HTML4+]
为了包含图像，作者可以使用OBJECT元素或IMG元素。
data属性是必需的，可以有一个有效的MIME类型作为值!
<object data="data:x-image/x,"></object>
注意:使用CSS中的<object>标签的技巧是设置一个自定义有效的MimeType x-image/x，后面不带数据(value在必需的逗号之后没有数据，)
默认渲染:300 x 150px，但大小可以在HTML或CSS中指定。
OBJECT现场演示
<SVG>标记
需要一个支持SVG的浏览器，并且有一个<image>元素用于光栅图像
SVG现场演示
<canvas>元素[HTML5+]。
width属性默认值为300,height属性默认值为150。
CANVAS现场演示
<input>元素，type="image"
限制:
．.． 元素应该显示为类似按钮的样式，以表明该元素是一个按钮。
哪个Chrome浏览器遵循并呈现一个4x4px的空正方形时没有文本
部分解，set value=" ":
<input type="image" id="img1" value=" ">
INPUT type=image现场演示
同时也要注意即将在HTML5.1中出现的<picture>元素，它目前是一个工作草案。
其他回答
如果您试图根据项目的上下文动态地在按钮中添加图像，可以使用?参数用于根据结果引用源。这里我使用mvvm设计让我的模型。相位[0]值决定我是否希望我的按钮被填充的灯泡的图像或关闭基于光相位的值。
不确定这是否有帮助。我使用JqueryUI, Blueprint和CSS。类定义应该允许您根据自己喜欢的样式设置按钮。
<button>
<img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
<img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
<img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
这里有一个很好的解决方案-> http://css-tricks.com/replace-the-image-in-an-img-with-css/ 正反两方面: (+)与具有相对宽度/高度的矢量图像(RobAu的答案不处理的事情) (+)是跨浏览器的(也适用于IE8+) (+)只使用CSS。所以不需要修改img src(或者如果你没有权限/不想改变已经存在的img src属性)。 (-)抱歉，它使用后台CSS属性:)
从CSS中设置图像的可能方法的集合
CSS2的:after伪元素或来自CSS3的新语法::after以及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**'s [`background-image:`](http://www.w3.org/TR/REC-CSS1-961217#background-image) property:
第一个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 -这个值使一个元素(例如HTML中的<li>)生成一个主块框和一个标记框。
.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日
一个后台类型的方法，它依赖于以一种相当特殊的方式(没有为这个用例定义)指定大小和到目前为止的回退边界属性(例如。边界:固体):
请注意，即使它们从来没有导致滚动机制，开始 图像仍然可以被祖先或视口剪切。
这个例子说明了图像只作为右下角的装饰组成:
.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(但这里有一个hack)，相反，我们可以装饰它:
.myClass { 边界:固体; 边框宽度: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 " 类= " 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">
我们将使用两个隐藏图像之一的渲染内容，通过CSS根据ID选择器更改#img1中的图像背景:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
注意:它是实验性的，只适用于Firefox中的-moz前缀，只适用于背景或背景图像属性，还需要指定大小。
现场演示
结论
任何语义内容或结构信息都放在HTML中。 样式和表示信息放在CSS中。 为了SEO的目的，不要在CSS中隐藏有意义的图像。 背景图形通常在打印时禁用。 自定义标签可以使用和样式从CSS，但原始版本的Internet Explorer不理解](IE没有样式化HTML5标签(与shiv))没有Javascript或CSS指导。 根据设计，SPA(单页应用程序)通常在背景中包含图像
话虽如此，让我们来探索适合图像显示的HTML标签:
<li> element [HTML4.01+]
列表风格的图像与显示的完美用例:列表项方法。
<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类= " bulletPics " > 电影<李id = " img1 " > < /李> 地球<李id = " img2 " > < /李> <李id = " img3 " >猕猴桃李< / > < / ul >
限制:难以设置样式(width:或float:可能有帮助)
<figure>元素[HTML5+]
figure元素表示一些流内容，可选带有标题，这些内容是自包含的(就像一个完整的句子)，通常作为文档主线中的单个单元引用。
元素没有内容是有效的，但是建议包含<figcaption>。
元素可以用来注释插图、图表、照片、代码清单等。
默认呈现:元素是右对齐的，有左右填充!
图现场演示
<object>元素[HTML4+]
为了包含图像，作者可以使用OBJECT元素或IMG元素。
data属性是必需的，可以有一个有效的MIME类型作为值!
<object data="data:x-image/x,"></object>
注意:使用CSS中的<object>标签的技巧是设置一个自定义有效的MimeType x-image/x，后面不带数据(value在必需的逗号之后没有数据，)
默认渲染:300 x 150px，但大小可以在HTML或CSS中指定。
OBJECT现场演示
<SVG>标记
需要一个支持SVG的浏览器，并且有一个<image>元素用于光栅图像
SVG现场演示
<canvas>元素[HTML5+]。
width属性默认值为300,height属性默认值为150。
CANVAS现场演示
<input>元素，type="image"
限制:
．.． 元素应该显示为类似按钮的样式，以表明该元素是一个按钮。
哪个Chrome浏览器遵循并呈现一个4x4px的空正方形时没有文本
部分解，set value=" ":
<input type="image" id="img1" value=" ">
INPUT type=image现场演示
同时也要注意即将在HTML5.1中出现的<picture>元素，它目前是一个工作草案。
我知道这是一个非常老的问题，但是没有答案提供为什么这永远不能做到的适当理由。虽然你可以“做”你想做的事情，但你不能以一种有效的方式去做。为了有一个有效的img标记，它必须有src和alt属性。
因此，任何给出不使用src属性的img标记的方法的答案都是在促进使用无效代码。
简而言之:在语法结构中，您所寻找的内容是不能合法地完成的。
来源:W3 Validator
我想补充一点:背景图像也可以用background-position: x - y来定位;(x水平y垂直)。(. .) 我的例子，CSS:
(..)
#header {
height: 100px;
background-image: url(http://.../head6.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: grey;
(..)
}
(...)
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
