是否可以在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属性。
当前回答
使用HTML5就可以了:)
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>
其他回答
你可以用JS转换它:
$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
使用CSS,这是做不到的。但是,如果你正在使用JQuery,像这样的东西可以做到:
$("img.myClass").attr("src", "http://somwhere");
我今天找到了一个解决方案(适用于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
享受吧!
使用内容: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从未加载)
或者你也可以这样做我在网上找到的。
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>