html - 是否可以在 CSS 中设置等效于 img 标签的 src 属性？

Question

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

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

我希望它是这样的

<img class="myClass"/>

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

我想在不使用 CSS 中的backgroundorbackground-image:属性的情况下做到这一点。

score 1036 · Accepted Answer

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

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

<!doctype html>

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

<img class="MyClass123"/>

测试和工作：

铬 14.0.835.163
Safari 4.0.5
歌剧 10.6

测试但不工作：

FireFox 40.0.2（观察Developer Network Tools，可以看到URL加载，但是图片没有显示）
Internet Explorer 11.0.9600.17905（永远不会加载 URL）

score 193 · Accepted Answer

我今天发现了一个解决方案（适用于 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

享受！

score 128 · Accepted Answer

从 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>标签的行为，虽然它可以以被黑客入侵且不符合标准的方式使用，但不推荐使用 with<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");
}

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

限制：

-

继承会将 'list-style' 值从 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"

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

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

我们将使用两个隐藏图像之一的渲染内容根据ID 选择器通过 CSS更改图像背景：#img1

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

.hide {display: none}

注意：它是实验性的，仅适用-moz于 Firefox 中的前缀，并且仅适用于background或background-image属性，还需要指定大小。

element() 现场演示

结论

任何语义内容或结构信息都在 HTML 中。
样式和表示信息在 CSS 中。
出于 SEO 目的，不要在 CSS 中隐藏有意义的图像。
背景图形通常在打印时被禁用。
可以使用自定义标签并根据 CSS 设置样式，但 Internet Explorer 的原始版本无法理解]（IE 不设置 HTML5 标签样式（使用 shiv）），无需 Javascript 或 CSS指导。
SPA（单页应用程序）在设计上通常在背景中包含图像

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

`<li>`元素 [HTML4.01+ ]

list-style-imagewithdisplay: 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>

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

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

对象现场演示

`<SVG>`标签_

需要支持 SVG 的浏览器并具有 <image>用于光栅图像的元素

SVG 现场演示

`<canvas>`元素 [HTML5+] 。

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

画布现场演示

`<input>`元素与`type="image"`

限制：

...该元素预计会出现按钮状，以表明该元素是一个按钮。

当没有文本时，Chrome 会跟随并呈现一个 4x4px 的空方块

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

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

输入类型=图像现场演示

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

score 26 · Accepted Answer

我使用了这个 CSS 的空 div 解决方案：

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

score 15 · Accepted Answer

我找到了比建议的解决方案更好的方法，但它确实使用了背景图像。 兼容方法（无法确认 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 */

}

score 13 · Accepted Answer

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

嗯，这是一个用 CSS 样式定义 IMG 表示（不是真正的图像）的解决方案。

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

它就像一个魅力:)

score 13 · Accepted Answer

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

Pro(s) 和 Con(s):
(+) 适用于矢量具有相对宽度/高度的图像（RobAu的答案没有处理的事情）
（+）是跨浏览器（也适用于 IE8+）
（+）它只使用 CSS。因此无需修改 img src（或者如果您没有访问权限/不想更改已经存在的 img src 属性）。
(-) 抱歉，它确实使用了背景 css 属性:)

score 10 · Accepted Answer

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

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

score 9 · Accepted Answer

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

score 4 · Accepted Answer

将多个图像放入“控制”容器中，然后更改容器的类。在 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 一样，但与通过 JSbackround-image更改不同。img src

score 3 · Accepted Answer

3

替代方式

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

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

于 2011-04-01T13:19:11.783 回答

score 3 · Accepted Answer

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

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

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

score 2 · Accepted Answer

重申先前的解决方案并在这里强调纯 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);
}

score 2 · Accepted Answer

2

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

于 2010-02-02T08:39:21.827 回答

score 2 · Accepted Answer

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

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

简而言之：您要查找的内容不能在语法结构内合法完成。

来源：W3 验证器

score 2 · Accepted Answer

或者你可以这样做我在互联网上找到的东西。

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

如此有效地隐藏图像并填充背景。哦，真是个小技巧，但如果你想要一个带有 alt 文本的 IMG 标签和一个可以在不使用 JavaScript 的情况下进行缩放的背景？

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

你可以用JS转换它：

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

score 0 · Accepted Answer

我要补充一点：背景图像也可以用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; 
  (..)
} 
(...)

score 0 · Accepted Answer

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% 有效，我检查过，如果不确保你填写必要的东西！！！我们需要指定高度，因为没有它就什么都没有！！！我会留下这个你可以添加的基本外壳。

例子：

 <!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");
}

PS 是的，我是 Linux 用户；）

score 0 · Accepted Answer

当用户在禁用“打印背景颜色和图像”的情况下打印文档时，任何基于background或background-image可能失败的方法。不幸的是，这是典型浏览器的默认设置。

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

score 0 · Accepted Answer

如果您尝试根据项目的上下文在按钮中动态添加图像，您可以使用 ? 根据结果参考来源。在这里，我使用 mvvm design 让我的 Model.Phases[0] 值确定我是否希望我的按钮根据光相位的值填充打开或关闭的灯泡图像。

不确定这是否有帮助。我正在使用 JqueryUI、蓝图和 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")"/>

score 0 · Accepted Answer

使用现代 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)>

<IMG> 上的空src定义触发 onerror 处理程序：loadIMG 函数
loadIMG 函数计算 CSS 值
去除所有非法字符
设置 IMG.src
当 CSS 更改时，图像不会更新！你必须再次调用 loadIMG

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

score -1 · Accepted Answer

只需使用 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 中设置等效于 img 标签的 src 属性？

25 回答 25

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

结论

<li>元素 [HTML4.01+ ]

<figure>元素 [HTML5+ ]

元素[ <object>HTML4+]

<SVG>标签_

<canvas>元素 [HTML5+] 。

<input>元素与type="image"