這篇“如何使用css樣式把圖片改為灰色”文章,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要參考一下,對于“如何使用css樣式把圖片改為灰色”,小編整理了以下知識點(diǎn),請大家跟著小編的步伐一步一步的慢慢理解,接下來就讓我們進(jìn)入主題吧。
成都創(chuàng)新互聯(lián)公司于2013年開始,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元邢臺縣做網(wǎng)站,已為上家服務(wù),為邢臺縣各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575
在css中,可以利用filter屬性來把圖片改為灰色,該屬性可以給圖片添加濾鏡效果,只需要給圖片元素添加“filter: grayscale(灰度數(shù)值%);”樣式即可將圖片設(shè)置為灰色。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中,可以利用filter屬性來把圖片改為灰色。
filter 屬性定義了元素(通常是<img>)的可視效果,即給圖片添加濾鏡效果,例如:模糊與飽和度。
當(dāng)filter 屬性的值為grayscale(%),可將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像,值為0%圖像無變化。值在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)樣式,最直接最簡單的一種,直接對HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式,就是將CSS代碼寫在之間,并且用
進(jìn)行聲明。3.外部樣式,其中鏈接樣式是使用頻率最高,最實(shí)用的樣式,只需要在之間加上
就可以了。其次就是導(dǎo)入樣式,導(dǎo)入樣式和鏈接樣式比較相似,采用@import樣式導(dǎo)入CSS樣式表,不建議使用。以上是“如何使用css樣式把圖片改為灰色”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁題目:如何使用css樣式把圖片改為灰色
文章位置:http://www.chinadenli.net/article30/gpseso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號、虛擬主機(jī)、域名注冊、動態(tài)網(wǎng)站、定制開發(fā)、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)