是否可以在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属性。
当前回答
我知道这是一个非常老的问题,但是没有答案提供为什么这永远不能做到的适当理由。虽然你可以“做”你想做的事情,但你不能以一种有效的方式去做。为了有一个有效的img标记,它必须有src和alt属性。
因此,任何给出不使用src属性的img标记的方法的答案都是在促进使用无效代码。
简而言之:在语法结构中,您所寻找的内容是不能合法地完成的。
来源:W3 Validator
其他回答
使用HTML5就可以了:)
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>
不,你不能通过CSS设置图像src属性。你能得到的最接近的是,如你所说,背景或背景图像。我不建议这样做,因为这有点不合逻辑。
但是,如果你的目标浏览器能够使用CSS3解决方案,那么你可以使用它。请使用Pacerier回答中描述的content:url。您可以在下面的其他答案中找到其他跨浏览器的解决方案。
我知道这是一个非常老的问题,但是没有答案提供为什么这永远不能做到的适当理由。虽然你可以“做”你想做的事情,但你不能以一种有效的方式去做。为了有一个有效的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来完成这一任务。