css - 如何更改图像源的ID?
问题描述:
有谁知道我该如何从CSS控制图像源?css - 如何更改图像源的ID?
我需要能够从CSS中更改图像src。我有循环印刷< img id=.. >
标签,并为每个id它不同的图像。我希望能够通过样式CSS区域的id来设置源代码。
有谁知道如何做到这一点?
答
这对于CSS来说是不可能的。 然而,这是很容易使用JavaScript:
document.getElementById("IdOfImage").src = "SourceOfImage";
答
这是不可能的:图像的来源是标记的一部分,而不是CSS。
唯一的解决方法是将div
元素与background-image
属性相反。这些你可以从样式表中设置:
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
然而,用这种方法,你失去所有的img
标签的优势,像
- 设置一个
alt
文本 - 的能力,重新调整
- 打印(大多数浏览器不打印背景图像)
- 搜索引擎索引(可能)
唯一的另一种选择是使用JavaScript,但如果JavaScript被禁用,这显然不会工作,这使得我认为这是一个禁忌。
答
你不能真正做到这一点,但是,如果你需要做的是使用CSS,你可以对两幅图像,像这样大小相同做到这一点:
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
只在FF3.6中测试它。
答
我找到了this article这可能是有用的。它实际上改变图像
这里的背景的情况下,网站的例子就不复存在了:
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
答
如果你不这样做想要使用背景或使用JavaScript,您可以在每个图层上使用不同的src图层进行分层其他(使用绝对定位)并使用CSS隐藏其中一个或另一个。在视觉上,它将是相同的,然后改变src。
答
现在可以使用CSS3使用Content风格。 我使用它通过媒体查询基于窗口大小在滑块内交换图像。
编辑:当我最初发布这个时,我并不知道它现在只在Webkit中有效。但是我怀疑它需要很长时间才能在浏览器中获得更多功能。
HTML
<img class="img1" src="image.jpg">
CSS
@media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
@media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
伟大,我会检查出来.. – gabi 2011-02-27 17:46:51
是可能的。请参阅http://*.com/a/10247567/461499 – RobAu 2013-01-13 08:21:23