鍍金池/ 問(wèn)答/HTML5  HTML/ CSS如何實(shí)現(xiàn)圖像裁剪遮罩層

CSS如何實(shí)現(xiàn)圖像裁剪遮罩層

clipboard.png

項(xiàng)目中通過(guò)input file實(shí)現(xiàn)上傳圖片,要實(shí)現(xiàn)預(yù)覽效果,并且預(yù)覽時(shí)要實(shí)現(xiàn)一個(gè)遮罩裁剪的效果,只顯示圓中的圖片,請(qǐng)問(wèn)怎么實(shí)現(xiàn)?

回答
編輯回答
編輯回答
茍活

使用三層

一層在下面,為完整的圖片,
第二層為中間,有透明度的白層
第三層最上面,圖片被裁減的樣子,可以使用border-radius或者clip-path
2018年5月22日 19:02