是否可以在CSS中设置src属性值? 在大多数情况下,我们这样使用它:
<img src="pathTo/myImage.jpg" />
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
我想知道是否有一种方法可以做到这一点,而不使用CSS中的background或background-image属性。
是否可以在CSS中设置src属性值? 在大多数情况下,我们这样使用它:
<img src="pathTo/myImage.jpg" />
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
我想知道是否有一种方法可以做到这一点,而不使用CSS中的background或background-image属性。
当前回答
使用内容:url(“image.jpg”)。
完整的工作方案(现场演示):
<!doctype html > <时尚> .MyClass123 { 内容:url(“http://imgur.com/SZ8Cm.jpg”); } > < /风格 < img类= " 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设置图像src属性。你能得到的最接近的是,如你所说,背景或背景图像。我不建议这样做,因为这有点不合逻辑。
但是,如果你的目标浏览器能够使用CSS3解决方案,那么你可以使用它。请使用Pacerier回答中描述的content:url。您可以在下面的其他答案中找到其他跨浏览器的解决方案。
使用CSS,这是做不到的。但是,如果你正在使用JQuery,像这样的东西可以做到:
$("img.myClass").attr("src", "http://somwhere");
或者你也可以这样做我在网上找到的。
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>
我想补充一点:背景图像也可以用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;
(..)
}
(...)
我使用了空的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>