使用 CSS 處理圖片的半透明效果十分簡單,只需要通過 `opacity` 或者 `rgba()` 函數(shù)來實(shí)現(xiàn)即可。下面具體介紹兩種方法:
1. `opacity` 屬性
`opacity` 屬性用于設(shè)置元素的不透明度,其取值范圍為 0.0(完全透明)到 1.0(完全不透明)之間。例如,下面的 CSS 代碼設(shè)置圖片透明度為 0.5:
p { opacity: 0.5; }注意,這種方法會(huì)對(duì)整個(gè)元素包括文本內(nèi)容產(chǎn)生透明效果。 2. `rgba()` 函數(shù) `rgba()` 函數(shù)用于設(shè)置顏色的透明度,其第四個(gè)參數(shù)表示透明度取值范圍也為 0.0 到 1.0。例如,下面的 CSS 代碼設(shè)置圖片透明度為 0.5:
p { background-color: rgba(255, 255, 255, 0.5); }注意,這種方法只會(huì)影響元素的背景色透明度,不會(huì)影響文本內(nèi)容的透明度。 總之,這兩種 CSS 方法可以輕松地實(shí)現(xiàn)圖片的半透明效果,讓網(wǎng)頁設(shè)計(jì)更加炫酷。