是否有可能在CSS中设置一个img标签的src属性的等效?

是否可以在CSS中设置src属性值?< br > 在大多数情况下，我们这样使用它:

<img src="pathTo/myImage.jpg" />

我希望它是这样的

<img class="myClass" />

.myClass {
some-src-property: url("pathTo/myImage.jpg");
}

我想知道是否有办法在CSS中使用background或background-image属性来做没有。

714110 次浏览
小开

不，你不能通过CSS设置图像src属性。你能得到的最接近的是，如你所说，background或background-image。我不建议这样做，因为这有点不合逻辑。

但是，如果你的目标浏览器能够使用CSS3解决方案，那么你可以使用它。使用content:url 正如Pacerier的回答中所描述的。您可以在下面的其他答案中找到其他跨浏览器的解决方案。

小开

如果你不想设置背景属性，那么你不能只使用CSS来设置图像的src属性。

您也可以使用JavaScript来完成这一任务。

小开

据我所知，你不能。CSS是关于样式的，图像的src是关于内容的。

小开

使用CSS，它不能完成。但是，如果你正在使用JQuery，像这样的东西可以做到:

$("img.myClass").attr("src", "http://somwhere");
小开

替代方法

.myClass {
background: url('/img/loading_big.gif');
}

<div class="myClass"></div>
小开
他们是对的。IMG是内容元素，CSS是设计元素。 但是，当您出于设计目的使用某些内容元素或属性时，情况又会如何呢? 我在我的网页上有IMG，如果我改变样式(CSS)必须改变

这是一个用CSS样式定义IMG表示(不是真正的图像)的解决方案

  1. 创建一个1x1的透明GIF或png
  2. 将IMG的属性“src”分配给该图像
  3. 在CSS样式中用background-image定义最终的表示形式

它的工作就像一个魅力:)

小开

我使用了空的div解决方案，与这个CSS:

#throbber {
background-image: url(/Content/pictures/ajax-loader.gif);
background-repeat: no-repeat;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
}

HTML:

<div id="throbber"></div>
小开

我今天找到了一个解决方案(适用于IE6+， FF, Opera, Chrome):

<img src='willbehidden.png'
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

工作原理:

  • 图像被缩小，直到不再可见宽度&高度。
    • 然后，你需要用填充物“重置”图像大小。这 一个是16x16的图像。当然你可以使用padding-left / . .
  • 最后，使用背景将新图像放在那里。
  • 如果新的背景图像太大或太小，我建议使用background-size，例如:background-size:cover;，它适合您的图像到分配的空间。

它也适用于提交-输入-图像，它们保持可点击。

见现场演示:http://www.audenaerde.org/csstricks.html#imagereplacecss

享受吧!

小开

如果您试图根据项目的上下文动态地在按钮中添加图像，可以使用?参数用于根据结果引用源。这里我使用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")"/>

小开
我发现了一个比建议的解决方案更好的方法，但它确实使用了背景图像。 兼容方法(IE6无法确认) 学分:# EYZ0 < / p > 
<img src="pathTo/myImage.jpg"/>

CSS:

img[src*="pathTo/myImage.jpg"] {


background-image: url("mynewimg.jpg"); /* lets say 20x20 */
width: 20px;


display:inline-block;
padding: 20px 0 0 0;
height: 0px !important;


/* for IE 5.5's bad box model */
height /**/:20px;
}

旧的形象不见了，新的形象如预期般出现了。

< p >
以下简洁的解决方案只适用于webkit

img[src*="pathTo/myImage.jpg"] {


/* note :) */
content:'';
display:inline-block;


width: 20px;
height: 20px;
background-image: url("mynewimg.jpg"); /* lets say 20x20 */


}
小开
最佳答案

使用# EYZ1。

完整的工作方案(Live Demo .):

<!doctype html>


<style>
.MyClass123{
content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>


<img class="MyClass123"/>

测试和工作:

  • Chrome 14.0.835.163
  • Safari你
  • Opera 10.6
  • Firefox 100 &更新的

测试和不工作:

  • FireFox 40.0.2(观察开发人员网络工具，您可以看到URL加载，但图像不显示)
  • Internet Explorer 11.0.9600.17905 (URL从未加载)
小开

为了重申之前的解决方案并强调纯CSS实现，这里是我的答案。

如果您从另一个站点获取内容，因此无法控制所交付的HTML，则需要使用纯CSS解决方案。在我的案例中，我试图删除授权源内容的品牌，以便被授权方不必为他们购买内容的公司做广告。因此，我删除了他们的标志，而保留了其他一切。我要提醒一下，这是我客户合同规定的。

{ /* image size is 204x30 */
width:0;
height:0;
padding-left:102px;
padding-right:102px;
padding-top:15px;
padding-bottom:15px;
background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
小开
我想补充一点:背景图像也可以用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;
(..)
}
(...)
小开

您可以在HTML代码中定义2个图像，并使用display: none;来决定哪一个将是可见的。

小开

HTMl代码:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css destination" />
</head>
<body>
<!-- click-able pic with link -->
<a href="site you want">
<!-- Take the off if you don't want click-able link -->
<h1 id(or class)="nameOfClassorid">
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>

Css代码:

span {
display: none;
}
h1 id or class {
height: of pic;
width: of pic;
/* Only flaw (so far) read bottom */
background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
background-image:url(/* 'new background!!!' */);
}
放学后我一直在学习html几天，想知道如何做到这一点。找出背景，然后把两者结合起来。 这工作100%我检查，如果不确保你填写必要的东西!! 我们需要指定高度，因为没有它就什么都没有!! 我将留下这个基本的shell，你可以添加

例子:

 <!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<a href="http:localhost">
<h1>
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>
span {
display: none;
}
h1 {
height: 100px;
width: 100px;
background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/Ubuntu-Desktop-@-2011-01-11-191526-300x225.png");
}


h1:hover {
height: 300px;
width: 300px;
background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

附注:是的，我是Linux用户;)

小开

我知道这是一个非常老的问题，但是没有答案提供为什么这永远不能做到的适当理由。虽然你可以“做”你想做的事情，但你不能以一种有效的方式去做。为了有一个有效的img标签，必须有src和alt属性。

因此，任何给出不使用src属性的img标记的方法的答案都是在促进使用无效代码。

简而言之:在语法结构中，您所寻找的内容是不能合法地完成的。

来源:W3 Validator

小开

在一个“控制”容器中放置几张图像，并更改容器的类。在CSS中，根据容器的类添加规则来管理图像的可见性。这将产生与更改单个图像的img src属性相同的效果。

HTML:

<span id="light" class="red">
<img class="red" src="red.png" />
<img class="yellow" src="yellow.png" />
<img class="green" src="green.png" />
</span>

CSS:

#light         { ... }
#light         *        { display: none; }     // all images are hidden
#light.red     .red     { display: inline; }   // show red image when #light is red
#light.yellow  .yellow  { display: inline; }   // .. or yellow
#light.green   .green   { display: inline; }   // .. or green

注意，它将预加载所有图像，像CSS backround-images，但不像通过JS改变img src。

小开
这里有一个很好的解决方案-> http://css-tricks.com/replace-the-image-in-an-img-with-css/

正反两种情况:
(+)工作与矢量图像的相对宽度/高度(一个东西，RobAu的回答不处理)
(+)是跨浏览器(也适用于IE8+)
(+)只使用CSS。所以不需要修改img src(或者如果你没有权限/不想改变已经存在的img src属性) (-)抱歉，它是否使用后台css属性:)

小开
当用户打印禁用"print background colors and images"的文档时，任何基于background或background-image的方法都可能失败。

这里唯一的打印友好和跨浏览器兼容的方法是Bronx提出的方法。

小开

从CSS中设置图像的可能方法的集合

CSS2的:after伪元素或更新的语法::after来自CSS3以及content:属性:

第一个W3C推荐:级联样式表，2级 CSS2规格 一九九八年五月十二日
最新W3C推荐:选择器3级 W3C推荐标准 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推荐:级联样式表，level 1 1996年12月17日

此属性设置元素的背景图像。在设置背景图像时，还应该设置当图像不可用时使用的背景颜色。当图像可用时，它被覆盖在背景颜色的顶部。

这个属性在CSS诞生之初就已经存在了，尽管如此，它还是值得一提。

默认渲染:原始大小(不能缩放，只能定位)

# EYZ0,

CSS3的background-size:属性通过允许多个缩放选项改进:

最新W3C状态:候选推荐 CSS背景和边界模块Level 3 2014年9月9日

# EYZ0

但即使有这个属性，它也取决于容器的大小。

仍然是一个很好的候选方法，见结论…

<人力资源> <人力资源>

CSS2的list-style:属性和display: list-item:

第一条W3C推荐:级联样式表，2级 CSS2规格 一九九八年五月十二日

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背景和边界模块Level 3 2014年9月9日

background-type方法依赖于以一种相当奇特的方式指定大小(未为本用例定义)和回退边界属性到目前为止(例如到目前为止)。# EYZ0):

请注意，即使它们从未导致滚动机制，开始 图像仍然可以被祖先或视口剪切

这个例子说明了组成仅作为右下角< >强装饰< / >强的图像:

.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">

我们将使用隐藏的图像中的呈现的内容在CSS中根据<强> ID选择符< / >强改变#img1中的背景图像:

#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}


.hide {display: none}

注意:它是< >强实验< / >强，只适用于Firefox中的-moz前缀，只适用于background或background-image属性，还需要指定大小。

结论

  1. 任何语义内容或结构信息都放在HTML中。
  2. 样式和表示信息放在CSS中。
  3. 为了SEO的目的，不要在CSS中隐藏有意义的图像。
  4. 背景图形通常在打印时禁用。
  5. 自定义标记可以使用和样式从CSS，但原始的版本的Internet Explorer不理解](IE没有样式化HTML5标签(用shiv))没有Javascript或CSS 指导。
  6. 根据设计，SPA(单页应用程序)通常在背景中包含图像

话虽如此，让我们来探索适合图像显示的HTML标签:

<li>元素[HTML4.01+]

list-style-image和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>元素[HTML5+]

figure元素表示一些流内容，可选带有标题，这些内容是自包含的(就像一个完整的句子)，通常作为文档主线中的单个单元引用。

元素没有内容是有效的，但是建议包含<figcaption>。

因此，元素可以用来注释插图，图表，照片、代码清单等。

默认呈现:元素是右对齐的，有左右填充!

<object>元素[HTML4+]

为了包含图像，作者可以使用OBJECT元素或IMG元素。

data属性是必需的，可以有一个有效的MIME类型作为值!

<object data="data:x-image/x,"></object>

注意:从CSS中使用<object>标签的技巧是设置一个自定义有效的MimeType x-image/x后面没有数据(值在必需的逗号,之后没有数据)

默认渲染:300 x 150px，但大小可以在HTML或CSS中指定。

<SVG>标签

需要SVG 有能力的浏览器，栅格图像有一个<image>元素

<canvas>元素[HTML5+]。

width属性默认为300， height属性默认为150。

带有type="image"的<input>元素

限制:

．.． 元素应该显示为类似按钮的样式，以表明该元素是一个按钮。

哪个Chrome浏览器遵循并呈现一个4x4px的空正方形时没有文本

部分解决方案，设置value=" ":

<input type="image" id="img1" value=" ">

还要注意即将出现的HTML5.1中的<picture>元素，目前是工作草案。

小开

或者你也可以这样做我在网上找到的。

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">

.egg {
width: 100%;
height: 0;
padding: 0 0 200px 0;
background-image: url(linkToImage.jpg);
background-size: cover;
}

这样可以有效地隐藏图像和填充背景。哦，这是一个黑客，但如果你想要一个IMG标签与alt文本和背景，可以不使用JavaScript缩放?

在我现在正在做的一个项目中，我创建了一个英雄块树枝模板

<div class="hero">
<img class="image" src="\{\{ bgImageSrc }}"
alt="\{\{ altText }}" style="background-image: url(\{\{ bgImageSrc }});">
</div>
小开

你可以用JS转换它:

$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
小开

使用HTML5就可以了:)

<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>
小开

一些数据我会留在HTML中，但最好在CSS中定义src:

<img alt="Test Alt text" title="Title text" class="logo">


.logo {
content:url('../images/logo.png');
}

提交答案