CSS圖片遮罩層漸變是一種常見的網頁設計技巧，它可以使頁面更加美觀和有吸引力。 CSS漸變是一種使顏色不斷變化的方式，而圖片遮罩層則是一種隱藏圖片的方式，將兩者結合起來，就可以達到想要的效果。

.image-wrapper{
position: relative;
display: inline-block;
}
.image-wrapper:hover:after{
opacity: 1;
}
.image-wrapper:after{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, 0));
}
.image-wrapper img{
display: block;
max-width: 100%;
}

上述代碼就是一個簡單的CSS圖片遮罩層漸變的實現，由于圖片沒有被直接遮擋，而是通過在圖片外面創建一個覆蓋整個圖片的偽元素，并再次利用CSS漸變和opacity屬性使其漸變變化，并在鼠標懸停時顯示，所以頁面效果更加生動活潑。