html - 如何单独使用 CSS 在点击时更改图像？

Question

我有一张图片，点击图片后我想在其下方显示另一张图片。我正在寻找一个简单的纯 CSS 解决方案。

这可能吗？

Answer 1

长话短说!

input[type="checkbox"] {
    content: url('http://placekitten.com/150/160');
    appearance: none;
    display: block;
    width: 150px;
    height: 150px;
}

input[type="checkbox"]:checked {
    content: url('http://placekitten.com/170/180');
}

<input type="checkbox" />

---

纯 CSS 解决方案

摘要

复选框输入是用于实现切换功能的 native 元素，我们可以利用它来获益。

利用 :checked 伪类 - 将它附加到复选框的伪元素(因为你不能真正影响 input 本身的背景)，并且相应地更改其背景。

实现

input[type="checkbox"]:before {
    content: url('images/icon.png');
    display: block;
    width: 100px;
    height: 100px;
}
input[type="checkbox"]:checked:before {
    content: url('images/another-icon.png');
}

演示

这是一个 full working demo on jsFiddle来说明该方法。

重构

这有点麻烦，我们可以做一些改变来清理不必要的东西；因为我们并没有真正应用背景图像，而是设置元素的 content，所以我们可以省略伪元素并直接在复选框上设置它。

不可否认，它们在这里没有任何实际用途，只是为了掩盖复选框的 native 呈现。我们可以简单地删除它们，但在最好的情况下这会导致 FOUC，或者如果我们无法获取图像，它只会显示一个巨大的复选框。

进入appearance属性:

The (-moz-)appearance CSS property is used ... to display an elementusing a platform-native styling based on the operating system's theme.

我们可以通过分配 appearance: none 来覆盖平台原生样式并完全绕过该故障(我们必须考虑供应商前缀，自然地，无前缀形式是目前在任何地方都不受支持)。然后简化了选择器，并且代码更加健壮。

实现

input[type="checkbox"] {
    content: url('images/black.cat');
    display: block;
    width: 200px;
    height: 200px;
    -webkit-appearance: none;
}
input[type="checkbox"]:checked {
    content: url('images/white.cat');
}

演示

同样，一个 live demo of the refactored version is on jsFiddle .

引用资料

• :checked
• -moz-appearance/-webkit-appearance

注意:目前这只适用于 webkit，我正在尝试为 gecko 引擎修复它。我会发布更新版本。

更新:appearance 属性现在是 widely adopted ，因此使用供应商前缀是多余的。万岁!