在Web開發中，經常需要使用圖片來豐富頁面內容。有時候，我們需要給圖片加上一層藍色的蒙層，讓頁面看起來更加美觀和高檔。那么，如何利用CSS給圖片加上藍色蒙層呢？

首先，我們需要創建一個包含圖片的HTML元素：

<div class="image-container">
<img src="image.jpg" alt="圖片">
</div>

接著，我們給這個HTML元素加上CSS樣式：

.image-container {
position: relative;
}
.image-container::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 255, 0.5);
}

這段代碼中，我們使用了偽元素::before來創建一個藍色的蒙層。其中，content屬性設置為空，display屬性設置為block，使得蒙層能夠顯示出來。position屬性設置為absolute，使得蒙層相對于父元素進行定位。top、left、width、height屬性分別設置為0、0、100%、100%，使得蒙層覆蓋整個父元素。background-color屬性設置為rgba(0,0,255,0.5)，表示蒙層的背景色為藍色，并且透明度為0.5。

最后，我們需要將圖片設置為相對定位，并將z-index設置為2，使其覆蓋在蒙層之上：

.image-container img {
position: relative;
z-index: 2;
}

現在，整個HTML元素就被加上了一個藍色的蒙層，使得頁面看起來更加美觀和高端。