结论

Question

是否可以在CSS中设置src属性值？目前，我正在做的是：

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

我想要它是这样的

<img class="myClass" />

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

我想使用CSS中的background或background-image:属性不使用。

Answer 1

使用content:url("image.jpg")。

完整的解决方案（ Live Demo ）：

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

经过测试和工作：

Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6

经过测试且不正在工作：

FireFox 40.0.2（观察开发者网络工具，您可以看到URL加载，但图像未显示）
Internet Explorer 11.0.9600.17905（URL永不加载）

Answer 2

我今天发现了一个解决方案（适用于IE6 +，FF，Opera，Chrome）：

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

工作原理：

图像缩小，直到宽度和宽度不再可见。高度。
然后，您需要使用填充“重置”图像大小。这个一个给出一个16x16的图像。当然你可以使用padding-left / padding-top用于制作矩形图像。
最后，使用背景将新图像放在那里。
如果新背景图片太大或太小，我建议使用background-size例如：background-size:cover;，使您的图片适合分配的空间。

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

查看现场演示：http://www.audenaerde.org/csstricks.html#imagereplacecss

享受！

Answer 3

从CSS

设置图像的可能方法的集合

来自 CSS3 的

CSS2 ＆＃39; s :after伪元素或newer语法::after以及{ {3}}属性：

_{第一次W3C建议：content: 1998年5月12日}
^{最新W3C建议：Cascading Style Sheets, level 2
CSS2 Specification 2011年9月29日}

此方法 在元素的文档树内容后追加 内容。

注意：某些浏览器通过实验直接在某些元素选择器上呈现content属性，而忽略了定义的最新W3C建议：

适用于：:before和:after伪元素

CSS2语法（前向兼容）：

.myClass:after {
  content: url("somepicture.jpg");
}

CSS3选择器：

.myClass::after {
  content: url("somepicture.jpg");
}

默认渲染：原始大小（不依赖于显式大小声明）

此规范未完全定义：替换元素（例如HTML中的IMG）之前和之后的交互。这将在未来的规范中更详细地定义。

但即使在撰写本文时，仍然没有定义<IMG>标记的行为，尽管它可以用Selectors Level 3 W3C Recommendation， 用{{1}不推荐 ！

很棒的候选人方法，见结论......

<小时/> <小时/> CSS1 ＆＃39; s hacked and non standards compliant way属性：

^{第一个W3C建议：background-image: 1996年12月17日}

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

这个属性从CSS开始就已存在，但它值得一提。

默认渲染：原始尺寸（无法缩放，仅定位）

然而，

通过允许多个缩放选项，

CSS3 的Cascading Style Sheets, level 1属性得到了改进：

^{最新W3C状态：候选推荐 background-size: 2014年9月9日}

<img>

但即使使用此属性，也取决于容器大小。

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

<小时/> <小时/>

CSS2 ＆＃39; CSS Backgrounds and Borders Module Level 3属性以及[length> | <percentage> | auto ]{1,2} | cover | contain：

^{第一个W3C建议：list-style: 1998年5月12日}

display: list-item属性设置将用作列表项标记（项目符号）的图像

列表属性描述了列表的基本可视格式：它们允许样式表指定标记类型（图像，字形或数字）

list-style-image: - 此值会导致元素（例如HTML中的 display: list-item ）生成主要区块框和标记框。

<li>

简写CSS：（.myClass { display: list-item; list-style-position: inside; list-style-image: url("someimage.jpg"); }）

<list-style-type> <list-style-position> <list-style-image>

默认渲染：原始大小（不依赖于显式大小声明）

限制：

继承将转移＆＃39; list-style＆＃39;从OL和UL元素到LI元素的值。这是指定列表样式信息的推荐方法。
他们不允许作者为列表标记指定不同的样式（颜色，字体，对齐等）或调整其位置

此方法也不适用于.myClass { display: list-item; list-style: square inside url("someimage.jpg"); }代码，因为无法在元素类型之间进行转换，而且这里的Cascading Style Sheets, level 2 CSS2 Specification不适用于Chrome。

好的候选人方法，见结论......

<小时/> <小时/>

CSS3 ＆＃39; limited, non compliant hack属性推荐：

^{最新W3C状态：候选推荐 border-image: 2014年9月9日}

background-type 方法依赖于以相当特殊的方式指定大小（未针对此用例定义）和后备边框属性到目前为止< / em>（例如<img>）：

请注意，即使它们从不引起滚动机制，也要一开始   图像可能仍会被祖先或视口剪切。

此示例仅将撰写的图像显示为右下角装饰：

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>（但是CSS Backgrounds and Borders Module Level 3），而我们可以将其装饰：

＆＃13;
＆＃13;
src
＆＃13;
.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; }
＆＃13;
＆＃13;
＆＃13;

标准传播后要考虑的良好候选方法。

<小时/> <小时/>

CSS3 ＆＃39; here's a hack符号工作草案值得一提：


注意：<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"函数仅复制引用元素的外观，而不是实际内容及其结构。

element()

我们将使用两个隐藏图片之一的呈现内容来更改{{1}中的图片 background }基于 ID选择器 通过CSS：

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

注意：它是 experimental ，仅适用于Firefox中的#img1前缀，且仅适用于#img1 { width: 480px; height: 320px; background: -moz-element(#pic1) no-repeat; background-size: 100% 100%; } .hide {display: none}或{{1属性，也需要指定大小。

element()

结论

任何语义内容或结构信息都以HTML格式显示。

样式和表示信息在CSS中。

出于搜索引擎优化的目的，不要在CSS中隐藏有意义的图像。
打印时通常会禁用背景图形。
element() Live Demo可以在CSS中使用和设置样式，但是没有Javascript或CSS 指南的原始版本的Internet Explorer不理解]（Custom tags）。
SPA（单页应用程序），按设计，通常在后台合并图像

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

IE not styling HTML5 tags (with shiv)元素[HTML4.01 +]

使用-moz方法完美使用 background 。

background-image元素可以为空，允许<li>，甚至可以省略list-style-image结束标记。

＆＃13;

display: list-item

＆＃13;

<li>

＆＃13;

限制：难以设置样式（</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")}可能有帮助）

flow content元素[HTML5 +]

figure元素表示一些流内容，可选地带有标题，是自包含的（如完整的句子），通常从文档的主流中引用为单个单元。

该元素无效且无内容，但建议包含<ul class="bulletPics"> <li id="img1">movie</li> <li id="img2">earth</li> <li id="img3">kiwi</li> </ul>。

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

默认渲染：元素右对齐，左右填充！

<figure>

FIGURE Live Demo元素[HTML4 +]

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

width:属性是必需的，并且可以将有效<object>作为值！

float:

注意：使用CSS中的<figcaption>标记的一个技巧是设置自定义有效MimeType data，后跟无数据（值后没有数据）所需的逗号<object data="data:x-image/x,"></object>）

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

MIME type

OBJECT Live Demo代码

需要SVG <SVG>并且有一个capable browser元素用于栅格图像

<image>

SVG Live Demo元素[HTML5 +]。

<object>属性默认为 300 ，x-image/x属性默认为 150 。

<canvas>

具有`,`

width

限制：

...该元素应该像按钮一样显示该元素是一个按钮。

Chrome跟随并在没有文字时呈现4x4px空方格

部分解决方案，设置height：

<input>

CANVAS Live Demo

另请注意 HTML5.1 中即将推出的INPUT type=image Live Demo元素，目前是工作草案。

Answer 4

我使用了空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>

Answer 5

我找到了比建议的解决方案更好的方法，但确实使用了背景图像。 符合方法（无法确认IE6） 致谢：http://www.kryogenix.org/code/browser/lir/

<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;
}

没有看到旧图像，新图像被视为预期。

以下简洁的解决方案仅适用于webkit

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

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

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

}

Answer 6

他们是对的。 IMG是一个内容元素，CSS是关于设计的。但是，当您为设计目的使用某些内容元素或属性时呢？我在我的网页上有IMG，如果我改变了样式（CSS），必须改变。

这是一个用CSS风格定义IMG演示文稿（实际上没有图像）的解决方案。

创建1x1透明gif或png。
将IMG的“src”分配给该图像。
使用CSS样式中的“background-image”定义最终演示文稿。

它就像一个魅力：）

Answer 7

这是一个非常好的解决方案 - ＆gt; http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro（s）和Con（s）：
（+）适用于具有相对宽度/高度的矢量图像（RobAu的answer无法处理的事物）
（+）是跨浏览器（也适用于IE8 +）
（+）它只使用CSS。因此无需修改img src（或者如果您没有访问/不想更改已存在的img src属性）。
（ - ）抱歉，确实使用后台css属性：）

Answer 8

您可以在HTML代码中定义2张图片，然后使用display: none;来确定哪些图片可见。

Answer 9

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

但是，如果您定位的浏览器能够使用它，则可以使用CSS3解决方案。使用content:url as described in Pacerier's answer。您可以在下面的其他答案中找到其他跨浏览器解决方案。

Answer 10

将几个图像放在“控制”容器中，然后改为更改容器的类。在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-image，但不同于通过JS更改img src。

Answer 11

替代方式

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

<div class="myClass"></div>

Answer 12

据我所知，你不能。 CSS是关于风格和图像的src是内容。

Answer 13

我会留下一些HTML格式的数据，但最好在CSS中定义 src ：

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

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

Answer 14

重申一个先前的解决方案，并强调纯CSS实现在这里是我的答案。

如果您从其他网站获取内容，则需要纯CSS解决方案，因此您无法控制所交付的HTML。在我的情况下，我试图删除许可源内容的品牌，以便许可证持有者不必为他们从中购买内容的公司做广告。因此，我在保留其他所有内容的同时删除了他们的徽标。我应该注意，这符合我的客户合同。

{ /* 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);
}

Answer 15

或者你可以在interweb thingy上找到这个。

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标签和一个可以在不使用JavaScript的情况下扩展的背景？

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

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

Answer 16

我知道这是一个非常古老的问题，但没有答案提供正确的理由来解释为什么永远无法做到这一点。虽然你可以“做”你正在寻找的东西，但你不能以有效的方式做到这一点。为了获得有效的img标记，必须具有src和alt属性。

因此，使用不使用src属性的img标记提供方法的任何答案都会促使使用无效代码。

简而言之：您所寻找的内容无法在语法结构中合法完成。

资料来源：W3验证员

Answer 17

您可以使用JS转换它：

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

Answer 18

使用CSS，无法完成。但是，如果您使用的是JQuery，那么这样的方法就可以解决问题：

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

Answer 19

如果您不想设置背景属性，则无法仅使用CSS设置图像的src属性。

或者你可以使用JavaScript来做这样的事情。

Answer 20

使用现代CSS属性从CSS定义加载IMG src

<style>
  body {
    --imgid: 1025; /* optional default img */
  }

  .shoes {
    --imgid: 21;
  }

  .bridge {
    --imgid: 84;
  }

  img {
    --src: "//i.picsum.photos/id/"var(--imgid)"/180/180.jpg"
  }

</style>
<script>
  function loadIMG(img) {
    img.src = getComputedStyle(img) // compute style for img
      .getPropertyValue("--src")        // get css property
      .replace(/[" ]/g, "");                // strip quotes and space
  }

</script>
<img src onerror=loadIMG(this) class=bridge>
<img src onerror=loadIMG(this) class=shoes>
<img src onerror=loadIMG(this)>

上的空src定义会触发onerror处理程序：loadIMG函数
loadIMG函数计算CSS值
剥离所有非法字符
设置IMG.src
当CSS更改时，图像不会更新！您必须再次致电loadIMG

JSFiddle：https://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

Answer 21

当用户使用“print 背景颜色和图像background或background-image的方法都可能失败>“已禁用。遗憾的是，这是典型浏览器的默认设置。

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

Answer 22

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，并想知道如何做到这一点。找出背景，然后将2和2放在一起。这是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");
}

P.S。是的我是Linux用户;）

Answer 23

我想补充一点：背景图片也可以放置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; 
  (..)
} 
(...)

Answer 24

如果您尝试根据项目的上下文动态添加图像，可以使用？根据结果参考来源。在这里，我使用mvvm设计让我的Model.Phases [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")"/>

Answer 25

只需使用HTML5 :)

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

IE not styling HTML5 tags (with shiv)元素[HTML4.01 +]

flow content元素[HTML5 +]

FIGURE Live Demo元素[HTML4 +]

OBJECT Live Demo代码

SVG Live Demo元素[HTML5 +]。

具有`,`

是否可以在CSS中设置img标记的src属性的等价物？

25 个答案:

从CSS

结论

使用现代CSS属性从CSS定义加载IMG src

JSFiddle：https://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

是否可以在CSS中设置img标记的src属性的等价物？

25 个答案:

从CSS

结论

IE not styling HTML5 tags (with shiv)元素[HTML4.01 +]

flow content元素[HTML5 +]

FIGURE Live Demo元素[HTML4 +]

OBJECT Live Demo代码

SVG Live Demo元素[HTML5 +]。

具有,

使用现代CSS属性从CSS定义加载IMG src

JSFiddle：https://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

具有`,`