CSS 图片过渡效果

Question

CSS是否真的无法识别图像src的更改并应用正确的过渡效果，而不需要使用一些网络上的hack方法，例如仅仅将多个图片叠放在一起或者使用src和背景的组合？

似乎这样的缺陷是因为图像是任何网站的主要元素（div、图像、文本）。我的问题是：它确实不直接支持吗？如果不是，为什么？

- Lodewijk

---

你尝试过什么？但是CSS是样式表，不应该了解图像src属性标签 - 但是对于background-image：css属性，它应该知道。如果您想更改src标记，则可能需要查看一些JavaScript内容。 - Oliver Atkinson

尽管通常不建议使用这种技术，但您可以对具有特定src属性值的img标签应用特定的CSS规则。请参见下面的答案。 - keaukraine

Answer 1

可以实现。 您可以创建CSS规则以匹配某些属性的某些值。这是CSS选择器中很少使用的功能，但自CSS 2.1以来就得到支持，我甚至曾经使用过一次-在所有浏览器中都可以工作，包括IE7。您可以在此处阅读更多信息：http://www.w3.org/TR/CSS2/selector.html#attribute-selectors。

示例：

img[src='one.png'] { ... }
img[src='two.png'] { ... }

在线演示：http://jsfiddle.net/dJJqf/

- keaukraine

---

只想要更改一张图片。所以我更改它的SRC属性。更改不应该是突然的，而是展示一个漂亮的旧图像淡出和新图像淡入的效果。就这样。但现在似乎已经确认，这不能仅通过html/css完成。_虽然不知道你可以通过css选择器来执行src操作，但还是感谢你，至少学到了一些东西_。 - Lodewijk

Answer 2

CSS无法更改DOM。所以，不，您不能编辑src属性。

当然，您可以使用JavaScript，或使用CSS背景（background-image），这些可以从CSS中更改。

或者，使用大量的HTML <img>标签，然后使用CSS将它们移动到其他位置。

- Tom van der Woerdt

---

看起来我表达得不够清楚，对此我感到抱歉。我的意思是，当我通过JS更改div的LEFT属性时，CSS会捕捉到这一变化，并应用我在CSS样式表中为该特定div请求的过渡效果。当我使用相同的JS脚本来更改图像（通过更改src），CSS并没有捕捉到它，也不会对我在CSS样式表中为该图像定义的过渡效果做任何事情。我的问题是，如果这不被支持，那么我很好奇为什么不支持？ - Lodewijk