蚊子大家都不陌生，夏天它們總是讓人煩不勝煩。但是作為一名前端工程師，我們可以用CSS讓蚊子顯示在圖片上，這樣在網頁制作中也許會有一些應用。

.mosquito {
position: absolute; /* 使蚊子脫離文檔流 */
left: 50%; /* 水平居中 */
top: 50%; /* 垂直居中 */  
transform: translate(-50%, -50%); /* 居中方式 */
background-image: url("mosquito.png"); /* 背景圖片 */
width: 50px;
height: 50px;
z-index: 2; /* 設置層疊順序，使其在其他元素上方 */
}

上面的代碼就是讓蚊子顯示在圖片上的關鍵。我們把蚊子的樣式設置成絕對定位，并設置left、top屬性讓它居中。然后設置背景圖片，最后通過z-index屬性讓它顯示在其他元素上方。

好了，現在讓我們來看下面的例子：

<div class="container">
<img src="background.jpg" alt="背景" />
<div class="mosquito"></div>
</div>

我們在一個容器中放置一個背景圖片，然后再放一個用CSS制作的蚊子。現在，這只蚊子就會出現在圖片上。當然，實際應用時還需要根據需求來調整樣式，并注意瀏覽器兼容性問題。

這只蚊子看起來好像不那么煩人了，不是嗎？