是否可以在CSS中设置img标记的src属性的等价物？-Java 学习之路

440

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

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

而我希望它是这样的

<img class="myClass" />

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

我想使用CSS中的 background 或 background-image: 属性来做这个 without .

24 回答

我用这个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>

回复于 2024-04-29T09:02:21+08:00

3

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

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

回复于 2024-04-29T09:02:21+08:00

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

附：是的我是Linux用户;）

回复于 2024-04-29T09:02:21+08:00

7

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

回复于 2024-04-29T09:02:21+08:00
8

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

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

回复于 2024-04-29T09:02:21+08:00
-2
或者你可以做到这一点，我发现在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>
```
回复于 2024-04-29T09:02:21+08:00

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

回复于 2024-04-29T09:02:21+08:00

2

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

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

回复于 2024-04-29T09:02:21+08:00
2
从CSS设置图像的可能方法的集合

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

第一个W3C建议：层叠样式表，2级CSS2规范1998年5月12日
最新的W3C建议：选择器级别3 W3C建议2011年9月29日

此方法 appends 内容刚好位于元素的文档树内容之后 .

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

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

CSS2语法（前向兼容）：
```
.myClass:after {
  content: url("somepicture.jpg");
}
```
CSS3选择器：
```
.myClass::after {
  content: url("somepicture.jpg");
}
```
默认呈现： Original Size （不依赖于显式大小声明）

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

但即使在撰写本文时，仍然没有定义带有 <IMG> 标记的行为，尽管它可用于hacked and non standards compliant way， usage with <img> is not recommended ！

伟大的候选人方法，见结论......

CSS1 的background-image: property ：

第一个W3C建议：层叠样式表，1级，1996年12月17日

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

这个属性从CSS开始就已经存在，但它应该得到光荣的提及 .

默认渲染： Original Size （无法缩放，仅定位）

然而，

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

最新的W3C状态：候选推荐CSS背景和边界模块级别3 2014年9月9日

[长度> | <百分比> |自动] {1,2} |封面|包含

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

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

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");
}
```
默认渲染： Original Size （不依赖于显式大小宣言）

限制：
- 继承会将'list-style'值从OL和UL元素传递给LI元素 . 这是指定列表样式信息的推荐方法 .
- 他们不允许作者为列表标记指定不同的样式（颜色，字体，对齐等）或调整其位置
此方法也不适用于 <img> 标记，因为无法在元素类型之间进行转换，这里的limited, non compliant hack在Chrome上不起作用 .

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

CSS3 的border-image:房产推荐：

最新的W3C状态：候选推荐CSS背景和边界模块级别3 2014年9月9日

一种背景类型的方法，依赖于以相当特殊的方式指定大小（未针对此用例定义）和回溯边界属性（例如. border: solid ）：

请注意，即使它们永远不会导致滚动机制，也可能会由祖先或视口剪切开始图像 .

此示例说明图像仅作为右下角 decoration 组成：
```
.myClass {
    border: solid;
    border-width: 0 480px 320px 0;
    border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
```
适用于：所有元素，边框折叠时除内部表元素外：折叠

它仍然不能改变 <img> 的标签 src （但here's a 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">
```
我们将使用两个隐藏图像之一的渲染内容来更改 #img1 中的图像背景，基于 ID Selector 通过CSS：
```
#img1 {
    width: 480px; 
    height: 320px; 
    background: -moz-element(#pic1) no-repeat;
    background-size: 100% 100%;
}

.hide {display: none}
```
注意：它是 experimental 并且仅适用于Firefox中的 -moz 前缀，仅适用于 background 或 background-image 属性，也需要指定大小 .
- element() Live Demo
结论
- 任何语义内容或结构信息都以HTML格式提供 .
- 样式和表示信息在CSS中 .
- 出于搜索引擎优化的目的，不要在CSS中隐藏有意义的图像 .
- 打印时通常禁用背景图形 .
- Custom tags可以在CSS中使用和设置样式，但是没有Javascript或CSS指导的Internet Explorer does not understand的原始版本 .
- SPA（单页应用程序），通常在背景中包含图像
话虽如此，让我们探索适合图像显示的HTML标签：

<li>元素[HTML4.01]

使用 display: list-item 方法完美使用 list-style-image .

<li> 元素可以为空，允许flow content，甚至允许省略 </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元素表示一些流内容，可选地带有 Headers ，是自包含的（如完整的句子），并且通常从文档的主流中引用为单个单元 .

该元素有效且没有内容，但建议包含 <figcaption> .

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

默认渲染：元素右对齐，左右填充！
- FIGURE Live Demo
<object>元素[HTML4]

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

data 属性是必需的，可以将有效的MIME type作为值！
```
<object data="data:x-image/x,"></object>
```
注意：使用CSS中的 <object> 标记的一个技巧是设置一个自定义的有效MimeType x-image/x ，后跟没有数据（值在所需的逗号之后没有数据 , ）

默认渲染：300 x 150px，但可以在HTML或CSS中指定大小 .
- OBJECT Live Demo
<SVG>标签

需要SVG capable browser并且具有用于光栅图像的<image>元素
- SVG Live Demo
<canvas>元素[HTML5] .

width属性默认为300，height属性默认为150 .
- CANVAS Live Demo
type =“image”的<input>元素

限制：

...该元素应该看起来像按钮，表示该元素是一个按钮 .

当没有文字时，Chrome会跟随并呈现一个4x4像素的空方格

部分解决方案，设置 value=" " ：
```
<input type="image" id="img1" value=" ">
```
- INPUT type=image Live Demo
还要注意 HTML5.1 即将推出的<picture>元素，目前正在制定工作草案 .
回复于 2024-04-29T09:02:21+08:00
3

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

回复于 2024-04-29T09:02:21+08:00
0
重申一个先前的解决方案，并强调纯CSS实现在这里是我的答案 .

如果您从其他站点获取内容，则需要Pure CSS解决方案，因此您无法控制所交付的HTML . 在我的情况下，我试图删除许可源内容的品牌，以便许可证不必为他们从中购买内容的公司做广告 . 因此，我正在删除他们的徽标，同时保留其他所有内容 . 我应该注意，这是在我的客户 Contract 范围内 .
```
{ /* 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);
}
```
回复于 2024-04-29T09:02:21+08:00
0
我今天发现了一个解决方案（适用于IE6，FF，Opera，Chrome）：
```
<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
```
这个怎么运作：
- 图像缩小，直到宽度和高度不再可见 .
- 然后，您需要使用填充'reset'图像大小 . 这个给出一个16x16的图像 . 当然，您可以使用padding-left / padding-top来制作矩形图像 .
- 最后，使用背景将新图像放在那里 .
- 如果新背景图像太大或太小，我建议使用 background-size ，例如： background-size:cover; ，它使您的图像适合分配的空间 .
它也适用于提交输入图像，它们保持可点击状态 .

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

请享用！
回复于 2024-04-29T09:02:21+08:00
2
使用content:url("image.jpg") .

完整的工作解决方案（现场演示）：
```
<!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
经过测试和 Not 工作：
- FireFox 40.0.2（观察开发者网络工具，您可以看到URL加载，但图像未显示）
- Internet Explorer 11.0.9600.17905（URL从不加载）
回复于 2024-04-29T09:02:21+08:00
1
他们是对的 . IMG是一个内容元素，CSS是关于设计的 . 但是，当您为设计目的使用某些内容元素或属性时呢？我在我的网页上有IMG，如果我改变样式（CSS）必须改变 .

那么这是一个用于定义CSS风格的IMG表示（没有真正的图像）的解决方案 .
- 创建1x1透明gif或png .
- 将IMG的原始"src"分配给该图像 .
- 使用CSS样式中的"background-image"定义最终演示文稿 .
它像一个魅力:)
回复于 2024-04-29T09:02:21+08:00
1

我知道这是一个非常古老的问题，但没有答案提供正确的理由，为什么永远不会这样做 . 虽然你可以"do"你正在寻找什么，你不能以有效的方式做到这一点 . 为了获得有效的img标记， must 具有src和alt属性 .

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

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

资料来源：W3验证员

回复于 2024-04-29T09:02:21+08:00

有些数据我会留在HTML中，但 src 更好地在CSS中定义：

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

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

回复于 2024-04-29T09:02:21+08:00

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

}

回复于 2024-04-29T09:02:21+08:00

将多个图像放在"controlling"容器中，并根据容器的类更改容器's class instead. In CSS, add rules to manage images'可见性 . 这将产生与更改单个图像的 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 .

回复于 2024-04-29T09:02:21+08:00

728

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

或者，您可以使用JavaScript来执行此类操作 .

回复于 2024-04-29T09:02:21+08:00
13
使用CSS，它可以完成_292021 . 但是，如果你正在使用JQuery，这样的东西就可以解决问题：
```
$("img.myClass").attr("src", "http://somwhere");
```
回复于 2024-04-29T09:02:21+08:00

167

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

回复于 2024-04-29T09:02:21+08:00

替代方式

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

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

回复于 2024-04-29T09:02:21+08:00

你可以用JS转换它：

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

回复于 2024-04-29T09:02:21+08:00

只需使用HTML5 :)

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

回复于 2024-04-29T09:02:21+08:00

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

24 回答

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

结论

<li>元素[HTML4.01]

<figure>元素[HTML5]

<object>元素[HTML4]

<SVG>标签

<canvas>元素[HTML5] .

type =“image”的<input>元素

相关问题