是否可以在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属性。
当前回答
为了重申之前的解决方案并强调纯CSS实现,这里是我的答案。
如果您从另一个站点获取内容,因此无法控制所交付的HTML,则需要使用纯CSS解决方案。在我的案例中,我试图删除授权源内容的品牌,以便被授权方不必为他们购买内容的公司做广告。因此,我删除了他们的标志,而保留了其他一切。我要提醒一下,这是我客户合同规定的。
{ /* 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);
}
其他回答
我今天找到了一个解决方案(适用于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
享受吧!
我知道这是一个非常老的问题,但是没有答案提供为什么这永远不能做到的适当理由。虽然你可以“做”你想做的事情,但你不能以一种有效的方式去做。为了有一个有效的img标记,它必须有src和alt属性。
因此,任何给出不使用src属性的img标记的方法的答案都是在促进使用无效代码。
简而言之:在语法结构中,您所寻找的内容是不能合法地完成的。
来源:W3 Validator
有些数据我会留在HTML中,但最好在CSS中定义src:
<img alt="Test Alt text" title="Title text" class="logo">
.logo {
content:url('../images/logo.png');
}
如果你不想设置背景属性,那么你不能只使用CSS来设置图像的src属性。
您也可以使用JavaScript来完成这一任务。
或者你也可以这样做我在网上找到的。
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>