1. 前言
在网页制作中，常常需要使用图片进行页面展示，同时按钮也是常用的元素之一。本文将介绍如何只使用css实现点击按钮切换图片。
2. 准备工作
在本文示例中，我们将使用以下图片文件：
image-1.jpg
image-2.jpg
image-3.jpg
同时，在html文件中我们需要先引入这些图片：
<img src="image-1.jpg" id="image">上述代码展示了一张id为"image"的图片，我们将在css中对该图片进行切换。
3. 使用:checked实现按钮选中效果
我们需要在html中添加两个radio按钮，用于表示当前选中的图片。将按钮的状态与图片状态绑定是实现切换的关键。我们可以使用:checked选择器来控制按钮状态，样式先不用管，html代码如下：
<input type="radio" name="image" id="image-1" checked>
<label for="image-1">Image 1</label>
<input type="radio" name="image" id="image-2">
<label for="image-2">Image 2</label>
<input type="radio" name="image" id="image-3">
<label for="image-3">Image 3</label>
注意：每个input标签都需要一个唯一的id，同时每个label标签都需要有一个for属性，值为对应的input的id，这样在点击label标签时就可以选中对应的input标签。
4. 使用display:none实现图片切换
接下来，我们需要编写css代码来实现图片的切换。具体思路是通过控制不同的radio按钮选中状态来实现不同的图片展示。示例代码如下：
/* 隐藏除了默认选中的input */
input[type="radio"]:not(:checked) ~ #image {
display: none;
}
/* 控制每个input选中时对应的图片展示 */
#image-1:checked ~ #image {
background-image: url("image-1.jpg");
}
#image-2:checked ~ #image {
background-image: url("image-2.jpg");
}
#image-3:checked ~ #image {
background-image: url("image-3.jpg");
}
/* 设定图片样式 */
#image {
width: 300px;
height: 200px;
background-size: cover;
background-position: center;
}
上述代码做了以下几件事：
隐藏除了默认选中的input对应的图片
控制每个input选中时对应的图片展示
设定图片的样式
注意：将图片的src属性改为background-image，在css中使用background-image属性进行控制。
5. 完整代码
<input type="radio" name="image" id="image-1" checked>
<label for="image-1">Image 1</label>
<input type="radio" name="image" id="image-2">
<label for="image-2">Image 2</label>
<input type="radio" name="image" id="image-3">
<label for="image-3">Image 3</label>
<img src="image-1.jpg" id="image">
/* 隐藏除了默认选中的input */
input[type="radio"]:not(:checked) ~ #image {
display: none;
}
/* 控制每个input选中时对应的图片展示 */
#image-1:checked ~ #image {
background-image: url("image-1.jpg");
}
#image-2:checked ~ #image {
background-image: url("image-2.jpg");
}
#image-3:checked ~ #image {
background-image: url("image-3.jpg");
}
/* 设定图片样式 */
#image {
width: 300px;
height: 200px;
background-size: cover;
background-position: center;
}
6. 总结
本文介绍了如何使用:checked选择器和display:none属性实现点击按钮切换图片的效果。该方法简单易用，效果良好，适用于很多图片切换的场景。希望本文能对大家有所帮助。