在前端開發中，經常需要更換頁面上的圖片。這里介紹一些使用CSS實現圖片更換的方法。

方法一：使用背景圖

/* CSS代碼 */
#logo{
width: 200px;
height: 100px;
background: url(old-logo.png) no-repeat center center;
}

上面的代碼中，old-logo.png是原來的圖片，可以被替換成需要使用的新圖片。通過修改CSS中background屬性的值可以實現圖片的更換。這種方式在響應式設計中也非常常見。

方法二：使用標簽

/* CSS代碼 */
#logo{
width: 200px;
height: 100px;
}
/* HTML代碼 */

這種方式比較常見，直接使用標簽來嵌入圖片。在CSS中定義尺寸，通過更改標簽的src屬性來實現圖片的更換。這種方式適用于單獨的圖片更換。

方法三：使用偽元素

/* CSS代碼 */
#logo{
width: 200px;
height: 100px;
position: relative;
}
#logo::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(old-logo.png) no-repeat center center;
}

這種方式比較有趣，通過使用CSS偽元素來實現更換。在CSS中定義尺寸以及父元素的position屬性，并使用::before偽元素設置背景圖。content屬性被設置為空，是為了使偽元素出現在父元素的前面。同樣，通過更改background屬性的值來實現圖片的更換。