您好,登錄后才能下訂單哦!
這篇“如何使用css樣式把圖片改為灰色”文章,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要參考一下,對(duì)于“如何使用css樣式把圖片改為灰色”,小編整理了以下知識(shí)點(diǎn),請(qǐng)大家跟著小編的步伐一步一步的慢慢理解,接下來(lái)就讓我們進(jìn)入主題吧。
在css中,可以利用filter屬性來(lái)把圖片改為灰色,該屬性可以給圖片添加濾鏡效果,只需要給圖片元素添加“filter: grayscale(灰度數(shù)值%);”樣式即可將圖片設(shè)置為灰色。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中,可以利用filter屬性來(lái)把圖片改為灰色。
filter 屬性定義了元素(通常是<img>)的可視效果,即給圖片添加濾鏡效果,例如:模糊與飽和度。
當(dāng)filter 屬性的值為grayscale(%),可將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像,值為0%圖像無(wú)變化。值在0%到100%之間,則是效果的線性乘子。若未設(shè)置,值默認(rèn)是0;
示例代碼:
<!DOCTYPE html> <html> <head> <style> .img1 { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(50%); } .img2 { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(70%); } .img3 { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } </style> </head> <body> <p>設(shè)置圖片的灰度:</p> <img src="img/1.jpg" width="200"> <img class="img1" src="img/1.jpg" width="200"> <img class="img2" src="img/1.jpg" width="200"> <img class="img3" src="img/1.jpg" width="200"> </body> </html>
1.行內(nèi)樣式,最直接最簡(jiǎn)單的一種,直接對(duì)HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式,就是將CSS代碼寫(xiě)在之間,并且用
進(jìn)行聲明。3.外部樣式,其中鏈接樣式是使用頻率最高,最實(shí)用的樣式,只需要在之間加上
就可以了。其次就是導(dǎo)入樣式,導(dǎo)入樣式和鏈接樣式比較相似,采用@import樣式導(dǎo)入CSS樣式表,不建議使用。以上是“如何使用css樣式把圖片改為灰色”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。