CSS中的圖片高亮顯示非常常見,可以通過以下幾種方法來實現:
/* 方法一:使用透明度 */ img:hover { opacity: 0.5; } /* 方法二:使用濾鏡 */ img:hover { filter: brightness(1.5); } /* 方法三:使用混合模式 */ img:hover { mix-blend-mode: screen; } /* 方法四:使用背景 */ div { background-image: url('image.jpg'); } div:hover { background-image: url('image-highlight.jpg'); }
以上方法中,使用透明度使圖片變淡,使用濾鏡則可以增加亮度,使用混合模式可以增強圖片的對比度,而使用背景則可以在hover時切換圖片。
需要注意的是,不同的方法可能會對圖片本身造成影響,所以建議在使用時進行測試。而如果要實現動畫效果,則需要將CSS的transition屬性與高亮效果結合。