Question

有谁知道如何从CSS控制图像源？

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

有谁知道怎么做？

Answer 1

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

唯一的解决方法是使用带有div属性的background-image元素。您可以在样式表中设置的那些：

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

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

但是，使用此方法会丢失所有img标记的优点，例如

设置alt文字
调整大小
打印（大多数浏览器不打印背景图像）
搜索引擎索引（可能）

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

Answer 2

使用CSS无法做到这一点。但是，使用Javascript非常容易：

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

Answer 3

现在可以使用CSS3使用内容样式。我使用它通过媒体查询根据窗口大小交换滑块内的图像。

编辑：当我最初发布此内容时，我不知道它目前仅在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);
    }
}

Answer 4

你不能真的这样做，但是，如果你确实需要使用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中测试过它。

Answer 5

我发现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 */
}

Answer 6

如果您不想使用背景或使用javascript，则将2个不同src的图像叠加在一起（使用绝对定位）并使用CSS隐藏其中一个或另一个。在视觉上它会改变src。

css - 如何通过id更改图像源？

6 个答案: