使用CSS換照片可以讓網頁更加生動，讓用戶體驗更加舒適，接下來就讓我們一起來學習如何在CSS中換照片吧！

//html代碼
<div class="picture">
<img src="image1.jpg">
</div>
//CSS代碼
.picture {
width: 400px;
height: 250px;
background-image: url("image2.jpg");
background-repeat: no-repeat;
background-size: cover;
}

首先，我們需要在html中插入一張圖片，并用CSS將其包裹在一個div里。在CSS中，我們定義這個div的樣式，將image1.jpg換成了image2.jpg。如果我們只使用代碼background-image:url("image2.jpg");，那么div的背景圖片會重復填滿整個div，因此我們使用background-size:cover;將其拉伸至div的大小。

//HTML代碼
<div class="picture">
<img src="image1.jpg" id="click">
</div>
//CSS代碼
.picture {
width: 400px;
height: 250px;
}
#click:hover {
content: url("image2.jpg");
}

如上是另一種在CSS中換照片的方法。我們在html中的圖片加了一個id="click"，并在CSS中定義了當鼠標懸停在該元素上時，content屬性變成了image2.jpg，于是便實現了通過鼠標懸停來換照片的效果。