CSS邊緣漸隱技術可以讓圖片邊緣的顏色變得透明,從而實現圖片漸隱效果。這一技術常在網頁設計中使用,特別適用于背景圖、幻燈片等需要過渡效果的場景。
img { opacity: 1; transition: opacity 0.3s ease-in-out; } img:hover { opacity: 0.8; } img:before { content: ""; position: absolute; z-index: -1; left: -10px; right: -10px; top: -10px; bottom: -10px; border: 1px solid rgba(0, 0, 0, 0.2); } img:after { content: ""; position: absolute; z-index: -1; left: -10px; right: -10px; top: -10px; bottom: -10px; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
以上代碼中,我們通過:before和:after偽元素來實現邊緣漸隱的效果。其中:before偽元素畫一個寬度為1像素的透明邊框,從而使圖片邊緣變成漸變色。而:after偽元素則利用CSS的線性漸變函數實現圖片的漸隱效果。當鼠標hover到圖片上時,通過調整opacity屬性,使得圖片透明度變得不同,從而實現漸隱漸顯的效果。
需要注意的是,在使用這種技術時,要保證圖片的父元素具有明確的高寬,否則偽元素的效果可能無法正常顯示。