CSS 是前端開發(fā)工具中不可或缺的一種語言，它可以實(shí)現(xiàn)頁面的美化、布局等功能。在頁面設(shè)計(jì)中，經(jīng)常會(huì)用到鼠標(biāo)經(jīng)過元素時(shí)，觸發(fā)元素背景圖片的變化效果。下面我們來學(xué)習(xí)一下如何使用 CSS 實(shí)現(xiàn)這一功能。 首先，我們需要準(zhǔn)備好兩張不同背景的圖片，分別命名為“bg1.jpg”和“bg2.jpg”。然后，在 HTML 文件中添加一個(gè)帶有樣式的 div 元素，代碼如下：

<div class="bg-change">
<p>鼠標(biāo)經(jīng)過下方方塊，可切換兩張不同的背景圖片</p>
</div>

接下來，我們?cè)?CSS 文件中添加以下代碼，實(shí)現(xiàn)鼠標(biāo)移入 div 元素時(shí)，背景圖片的切換：

.bg-change {
background-image: url("bg1.jpg");  /* 設(shè)置初始背景圖片 */
background-size: cover;  /* 背景圖片鋪滿 div 元素 */
width: 300px;
height: 300px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
transition: background-image .5s ease-in-out; /* 設(shè)置過渡效果 */
}
.bg-change:hover {
background-image: url("bg2.jpg");  /* 當(dāng)鼠標(biāo)經(jīng)過時(shí)，背景圖片變?yōu)?bg2.jpg */
}

在上面的代碼中，我們?cè)O(shè)置了 div 元素的初始背景圖片為 bg1.jpg，并且設(shè)置了背景圖片的大小、文字居中以及過渡效果。然后，在通過:hover 選擇器設(shè)置了當(dāng)鼠標(biāo)經(jīng)過該元素時(shí)，背景圖片變更為 bg2.jpg。 通過以上代碼，我們成功地實(shí)現(xiàn)鼠標(biāo)經(jīng)過元素時(shí)，觸發(fā)背景圖片變化的效果。在實(shí)際開發(fā)中，可以將該效果應(yīng)用于按鈕、圖標(biāo)等元素，提高頁面交互性和美觀度。