css - 如何更改图像源的ID？

我需要能够从CSS中更改图像src。我有循环印刷< img id=.. >标签，并为每个id它不同的图像。我希望能够通过样式CSS区域的id来设置源代码。

有谁知道如何做到这一点？

2011-02-27 gabi

这对于CSS来说是不可能的。然而，这是很容易使用JavaScript：

document.getElementById("IdOfImage").src = "SourceOfImage";

来源

2011-02-27 17:34:04

伟大，我会检查出来.. – gabi 2011-02-27 17:46:51

是可能的。请参阅http://stackoverflow.com/a/10247567/461499 – RobAu 2013-01-13 08:21:23

这是不可能的：图像的来源是标记的一部分，而不是CSS。

唯一的解决方法是将div元素与background-image属性相反。这些你可以从样式表中设置：

<div id="image1"></div> 

#image1 { width: 100px; height: 50px; background-image: url(image.gif); }

然而，用这种方法，你失去所有的img标签的优势，像

设置一个alt文本
的能力，重新调整
打印（大多数浏览器不打印背景图像）
搜索引擎索引（可能）

唯一的另一种选择是使用JavaScript，但如果JavaScript被禁用，这显然不会工作，这使得我认为这是一个禁忌。

来源

2011-02-27 17:30:02

你不能真正做到这一点，但是，如果你需要做的是使用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中测试它。

来源

2011-02-27 17:59:37 markijbema

我找到了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 */ 
}

来源

2013-12-20 02:16:59 AaA

如果你不这样做想要使用背景或使用JavaScript，您可以在每个图层上使用不同的src图层进行分层其他（使用绝对定位）并使用CSS隐藏其中一个或另一个。在视觉上，它将是相同的，然后改变src。

来源

2014-08-27 12:00:26 Rolf

现在可以使用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); 
    } 
}

来源

2015-03-03 16:33:06 Charbrec

css - 如何更改图像源的ID？

回答

相关问题