是否可以在CSS中设置src属性值? 在大多数情况下,我们这样使用它:

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

我希望它是这样的

<img class="myClass" />
.myClass {
    some-src-property: url("pathTo/myImage.jpg");
}

我想知道是否有一种方法可以做到这一点,而不使用CSS中的background或background-image属性。


当前回答

替代方法

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>

其他回答

如果您试图根据项目的上下文动态地在按钮中添加图像,可以使用?参数用于根据结果引用源。这里我使用mvvm设计让我的模型。相位[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")"/>     

据我所知,你不能。CSS是关于样式的,图像的src是关于内容的。

有些数据我会留在HTML中,但最好在CSS中定义src:

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

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

使用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属性。

您也可以使用JavaScript来完成这一任务。