CSS3提供了一種不用過渡就能切換圖片的方法，下面我們來介紹一下：

/* 首先定義兩個圖片作為背景 */
.bg1 {
background-image: url('image1.png');
}
.bg2 {
background-image: url('image2.png');
}
/* 定義一個單選框 */
input[type="radio"] {
display: none;
}
/* 給單選框設置一個標簽 */
label {
cursor: pointer;
}
/* 圖片容器 */
.image-container {
width: 500px;
height: 300px;
position: relative;
}
/* 圖片 */
.image-container .image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* 默認顯示第一張圖片 */
.bg1 .image {
z-index: 2;
}
/* 當單選框被選中時，將另一張圖片放到最上層 */
#radio2:checked ~ .bg1 .image {
z-index: 1;
}
/* 當單選框被選中時，將第一張圖片放到最上層 */
#radio1:checked ~ .bg2 .image {
z-index: 2;
}

這段代碼使用了雙背景層疊的方法，利用單選框的選中狀態來控制背景層級，實現了圖片的切換效果。