在網(wǎng)頁設(shè)計(jì)中，經(jīng)常會(huì)使用圖片來增加頁面的美觀和吸引力。而有時(shí)又需要在多張圖片之間進(jìn)行切換，在這種情況下，我們可以使用純CSS來實(shí)現(xiàn)點(diǎn)擊切換圖片。

HTML代碼：

<div class="gallery">
<input type="radio" name="img" id="img-1" checked>
<label for="img-1"><img src="image1.jpg"></label>
<input type="radio" name="img" id="img-2">
<label for="img-2"><img src="image2.jpg"></label>
<input type="radio" name="img" id="img-3">
<label for="img-3"><img src="image3.jpg"></label>
</div>

在HTML代碼中，我們將多張圖片和其對(duì)應(yīng)的radio和label放入一個(gè)名為“gallery”的div中，radio的name屬性保證它們屬于同一組，id和label中的for屬性用于綁定radio和label，使得當(dāng)點(diǎn)擊label時(shí)，對(duì)應(yīng)的radio被選中。

CSS代碼：

.gallery {
position: relative;
display: inline-block;
}
.gallery input[type=radio] {
display: none;
}
.gallery label {
position: absolute;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
transition: opacity .5s;
}
.gallery label img {
max-width: 100%;
height: auto;
}
.gallery input[type=radio]:checked + label {
opacity: 1;
z-index: 1;
}

CSS代碼中，主要是對(duì)“.gallery”進(jìn)行定位，對(duì)radio和label進(jìn)行樣式設(shè)置。對(duì)radio設(shè)置display:none來隱藏radio，對(duì)label設(shè)置opacity:0來隱藏標(biāo)簽。當(dāng)radio被選中時(shí)，對(duì)應(yīng)的label的opacity會(huì)變?yōu)?，使其出現(xiàn)在頁面中，并且z-index:1，使其“浮”在其他元素的上面。

通過以上代碼，我們便可以實(shí)現(xiàn)點(diǎn)擊切換圖片的效果，而且不需要使用任何JavaScript代碼。