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

.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%;
}

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