中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS3中filter屬性有哪些

發布時間:2021-10-19 14:46:33 來源:億速云 閱讀:102 作者:小新 欄目:web開發

小編給大家分享一下CSS3中filter屬性有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

css3的濾鏡filter屬性,可以對網頁中的圖片進行類似Photoshop圖片處理的效果,例如背景的毛玻璃效果、老照片(黑白照片)、火焰效果等。

CSS3中filter屬性有哪些

一、blur(px)高斯模糊

CSS3中filter屬性有哪些

二、brightness(%)亮度

CSS3中filter屬性有哪些

三、contrast(%)對比度

CSS3中filter屬性有哪些

四、drop-shadow()陰影

CSS3中filter屬性有哪些


注意: 這個 drop-shadow 與 box-shadow 都是在說陰影,但還是有區別的,看下圖

CSS3中filter屬性有哪些

圖中火焰的圖片,是一張png圖片,除了火焰以外,其他部分是透明的,我們能看見,box-shadow 是給整個圖片加陰影,而 drop-shadow 只是給不透明的部分加陰影,這是他們最重要的區別了。

五、grayscale(%)灰度

CSS3中filter屬性有哪些

六、hue-rotate(deg)色相旋轉

CSS3中filter屬性有哪些

七、invert(%)反轉

CSS3中filter屬性有哪些

八、opacity(%)透明度

CSS3中filter屬性有哪些

九、saturate(%)飽和度

CSS3中filter屬性有哪些

十、sepia(%)深褐色

CSS3中filter屬性有哪些

上面都只是把每種濾鏡單獨拿出來,展示效果,但是其實他們是可以一起使用的,比如這樣

CSS3中filter屬性有哪些

.all img{
    filter: brightness(120%) contrast(110%) saturate(120%) hue-rotate(-25deg) drop-shadow(0 0 5px #000);
}
web前端開發學習Q-q-u-n: 731771211,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻,PDF)

注:飽和度和對比度是兩個完全不同的概念,飽和對是對色彩的濃度(純度)的定義;對比度是對畫面明暗程度的定義。

理論上說,對比度是指畫面黑白明暗的層次;飽和度畫面中色彩的鮮艷程度與層次;

以上是“CSS3中filter屬性有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

额尔古纳市| 湘阴县| 饶河县| 宁晋县| 富阳市| 泸溪县| 上蔡县| 岐山县| 绥阳县| 县级市| 北川| 仲巴县| 抚州市| 大连市| 隆德县| 县级市| 宜黄县| 子洲县| 濉溪县| 同仁县| 讷河市| 华亭县| 大同市| 开封市| 隆昌县| 怀柔区| 泗阳县| 永嘉县| 茂名市| 德保县| 鹤庆县| 开平市| 汉寿县| 延津县| 南漳县| 云霄县| 准格尔旗| 乌审旗| 青铜峡市| 都江堰市| 德安县|