是否可以在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属性。
当前回答
替代方法
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
其他回答
你可以在HTML代码中定义2个图像,并使用display: none;来决定哪一个是可见的。
使用CSS,这是做不到的。但是,如果你正在使用JQuery,像这样的东西可以做到:
$("img.myClass").attr("src", "http://somwhere");
你可以用JS转换它:
$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
我知道这是一个非常老的问题,但是没有答案提供为什么这永远不能做到的适当理由。虽然你可以“做”你想做的事情,但你不能以一种有效的方式去做。为了有一个有效的img标记,它必须有src和alt属性。
因此,任何给出不使用src属性的img标记的方法的答案都是在促进使用无效代码。
简而言之:在语法结构中,您所寻找的内容是不能合法地完成的。
来源:W3 Validator
在一个“控制”容器中放置几张图像,并更改容器的类。在CSS中,根据容器的类添加规则来管理图像的可见性。这将产生与改变单个图像的img src属性相同的效果。
HTML:
<span id="light" class="red">
<img class="red" src="red.png" />
<img class="yellow" src="yellow.png" />
<img class="green" src="green.png" />
</span>
CSS:
#light { ... }
#light * { display: none; } // all images are hidden
#light.red .red { display: inline; } // show red image when #light is red
#light.yellow .yellow { display: inline; } // .. or yellow
#light.green .green { display: inline; } // .. or green
注意,它将预加载所有图像,就像CSS的backround-images,但不像通过JS更改img src。