CSS中有很多修改圖片顏色的方法,其中一種是將圖片變成白色。
img { filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: brightness(0%) invert(100%); -webkit-filter: brightness(0%) invert(100%); mix-blend-mode: difference; }
上述代碼中,使用了多種濾鏡,包括grayscale(100%), brightness(0%), invert(100%)和mix-blend-mode: difference。這些濾鏡的作用是將圖片變成黑白色,并且反轉(zhuǎn)顏色,最后使用混合模式difference將黑色部分變成白色。
需要注意的是,使用這種方法會(huì)將所有圖片都變成白色。如果只想改變某個(gè)圖片的顏色,可以給這個(gè)圖片加上一個(gè)class,然后只對(duì)這個(gè)class進(jìn)行樣式修改。
.white { filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: brightness(0%) invert(100%); -webkit-filter: brightness(0%) invert(100%); mix-blend-mode: difference; }
這樣,在HTML中給需要變成白色的圖片加上class="white"即可。
總之,使用CSS將圖片變成白色是一種簡(jiǎn)單有效的方法,可以讓網(wǎng)頁(yè)設(shè)計(jì)更加美觀。如果需要更多的圖片處理方法,可以繼續(xù)研究CSS中的濾鏡和混合模式。
下一篇css中將圖片放大