在網頁設計中,通過背景圖來豐富頁面內容使得網站有更好的可讀性和良好的用戶體驗常常被使用。而如果在鼠標經過背景圖的時候能夠改變它的透明度，這樣不僅可以提升美觀感，也可以增加頁面互動性。

.bg-img{
background-image: url(圖片URL);
width: 300px;
height: 200px;
opacity: 1; 
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.bg-img:hover{
opacity: 0.5; 
}

首先在HTML中創建一個div元素，然后通過css樣式將圖片作為其背景圖，設置其初始透明度為1，這里我們設置過渡效果，時長為0.5秒，速度函數為緩出(ease-out)，具體時間、速率可以根據需要修改。

接下來設置:hover偽類，當鼠標經過div元素的時候，背景圖的透明度改為0.5，這里也使用了過渡效果，鼠標離開的時候背景圖的透明度會平滑恢復為之前的完全不透明，從而實現了背景圖鼠標經過改變透明度。