是否可以在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从未加载)
其他回答
如果您试图根据项目的上下文动态地在按钮中添加图像,可以使用?参数用于根据结果引用源。这里我使用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")"/>
你可以用JS转换它:
$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
他们是对的。IMG是内容元素,CSS是设计元素。 但是,当您出于设计目的使用某些内容元素或属性时,情况又会如何呢? 我有IMG跨我的网页,必须改变,如果我改变样式(CSS)。
好吧,这是一个解决方案定义IMG表示(不是真正的图像)在CSS风格。
创建一个1x1透明GIF或png。 将IMG的属性“src”分配给该图像。 在CSS样式中用“background-image”定义最终的表示形式。
它的工作就像一个魅力:)
替代方法
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
使用CSS,这是做不到的。但是,如果你正在使用JQuery,像这样的东西可以做到:
$("img.myClass").attr("src", "http://somwhere");