在網頁設計中,常常需要用到圖片來增強頁面的視覺效果。但是有時候我們想要的圖片并不符合我們的風格,而相應純白的圖片卻又難以找到。這就是使用CSS3在圖片上添加濾鏡的好處,我們可以快速輕松的將圖片變成純白色以適應我們的風格。
img { filter: grayscale(100%) brightness(200%); }
以上的代碼可以將圖片變成純白色。其中,grayscale()
函數可以將圖片變成灰度圖像,100%
表示將圖片完全變為灰度,brightness()
函數可以調整圖像的亮度,200%
表示將圖片的亮度增加到兩倍。
這個方法也可以用來制作灰色陰影或黑色或彩色陰影。只要調整grayscale()
和brightness()
函數中的參數,就可以得到我們想要的效果。
img { filter: grayscale(70%) brightness(50%); }
以上的代碼可以將圖片變成灰色陰影效果。
總之,使用CSS3可以輕松地將圖片變成純白色以及其他各種效果。這樣,我們就可以更好地定制我們的網站、博客和其他應用程序,以滿足我們的個性化需求。
上一篇css meta自適應
下一篇css3圖片上曲線飄舞