在CSS中,我們可以使用filter
屬性來(lái)實(shí)現(xiàn)圖片一半變得模糊的效果,以下是一個(gè)示例代碼:
img { position: relative; filter: blur(0px); } img:before { content: ""; position: absolute; top: 0; left: 0; right: 50%; bottom: 0; filter: blur(5px); }
在這個(gè)示例中,我們首先對(duì)圖片應(yīng)用了filter
屬性,并將其值設(shè)置為blur(0px)
,這會(huì)使圖片保持清晰,我們使用了一個(gè)偽元素img:before
來(lái)覆蓋圖片的一半,并將其filter
值設(shè)置為blur(5px)
,這會(huì)使該元素及其覆蓋的圖片部分變得模糊,我們通過(guò)設(shè)置position
屬性來(lái)使偽元素覆蓋圖片的一半。
這個(gè)示例僅適用于水平方向的模糊效果,如果你需要在垂直方向或其他角度上實(shí)現(xiàn)模糊效果,你需要相應(yīng)地調(diào)整偽元素的位置和大小。