您現在的位置是:電腦技術吧?>? 故障問題 ??>??漸變濾鏡如何使用,漸變灰濾鏡怎么用??>??正文詳情

漸變濾鏡如何使用,漸變灰濾鏡怎么用

劍修筠2019-11-15 20:10:39 人圍觀
簡介ps漸變濾鏡怎么用在CSS3和IE過濾器中實現線性漸變對完美主義者來說是一件痛苦的事情,就像不去挑選一塊垃圾一樣。所以對于普通的漸變,那些可以用CSS解決的不使用圖片。CSS3為漸變

線性漸變在CSS3和IE濾鏡中的實現對于完美主義者來說,為了一個漸變而使用一張圖片是一件痛苦的事情,就像有鼻屎不摳掉一樣痛苦= =。

所以對于普通的漸變而言,能用CSS解決的就不去動用圖片。

CSS3中為我們提供了linear-gradient方法,可以直接對背景設置漸變。

CSS Code復制內容到剪貼板

    !DOCTYPE style div { width:100px;height:100px;text-align:center; font:16px/100px '微軟雅黑';color:#FFF; /*以下是CSS3的線性漸變*/ background:-webkit-linear-gradient(top,#FD0,#C30); background:-moz-linear-gradient(top,#FD0,#C30); background:-o-linear-gradient(top,#FD0,#C30); } /style div次碳酸鈷/div

但是CSS3也是很蛋疼的東西,他需要個瀏覽器前綴。

造成了這玩意兒得寫三行。

這個方法通常使用三個參數(也可用更多參數調更多色,這個以后再說)。

第一個參數是漸變的方向,top是從上到下,至于left、right、bottom的效果很容易從top推倒出來我就不羅嗦了。

CSS3還支持特定角度的漸變,第一個參數可以用度數比如45deg就是斜角漸變,但是這東西在IE上實現起來很困難,這里先不多說了。

第二第三個參數是漸變的顏色,這個從代碼上看就一目了然的。

CSS3的顏色可以用rgba來實現透明,比如50%透明的紅色:rgba(255,0,0,0.5),注意透明通道的取值范圍是0到1之間。

接下來就說說坑爹的IE,IE下需要通過漸變來實現,對于IE9那半吊子的CSS3我已經吐槽無力了,老老實實的用濾鏡比較好。

CSS Code復制內容到剪貼板

    !DOCTYPE style div { width:100px;height:100px;text-align:center; font:16px/100px '微軟雅黑';color:#FFF; /*以下是IE的線性漸變*/ filter:progid:DXImageTransform.Microsoft.Gradient( StartColorStr=#FFDD00,EndColorStr=#CC3300 ); } /style div次碳酸鈷/div

看吧,IE也很容易實現這樣簡單的漸變,雖然代碼長了一些。

這里要注意的是濾鏡里的顏色不能用簡單的#HHH去定義,必須寫上完整的六位十六進制。

如果需要同明度,就在前面加兩位作為透明度,比如50%透明的紅色:#80FF0000。

在漸變方向上,IE沒有CSS3那么豐富的方向可以旋轉,但是最基本的垂直和水平還是可以做到的。

默認是從上往下的漸變,可以加上GradientType=1讓漸變變成從左往右的。

CSS Code復制內容到剪貼板

    div { filter:progid:DXImageTransform.Microsoft.Gradient( StartColorStr=#FFDD00,EndColorStr=#CC3300,GradientType=1 ); }

既然用濾鏡和CSS3都可以兼容實現,那么做個全兼容也就是把上面的方法合并起來而已。

CSS Code復制內容到剪貼板

    !DOCTYPE style div { width:100px;height:100px;text-align:center; font:16px/100px '微軟雅黑';color:#FFF; /*全兼容線性漸變*/ background:-webkit-linear-gradient(top,#FD0,#C30); background:-moz-linear-gradient(top,#FD0,#C30); background:-o-linear-gradient(top,#FD0,#C30); filter:progid:DXImageTransform.Microsoft.Gradient( StartColorStr=#FFDD00,EndColorStr=#CC3300 ); } /style div次碳酸鈷/div

元素投影效果在CSS3和IE濾鏡中的實現按照慣例,先說說CSS3的投影效果。

CSS Code復制內容到剪貼板

    !DOCTYPE style div { width:100px;height:100px;text-align:center; font:14px/100px 微軟雅黑; border:1px solid #CCC; /*CSS3投影效果*/ box-shadow:0px 0px 10px #CCC; } /style div次碳酸鈷/div

這個box-shadow不需要加瀏覽器兼容頭,我最喜歡這樣的CS3了!IE9雖然也支持CSS3,不過那坑爹貨BUG太多,我不喜歡用IE9的CSS3。

就這個投影效果而言,IE9對于設置了collapse的TABLE元素使用投影會無效。

總之IE就是各種BUG,不過反正是要兼容到IE6的,就無視IE9的這些半吊子CSS3好了。

在IE上實現投影效果還是挺麻煩的,雖然IE有Shadow濾鏡,但是那玩意兒和線性漸變沒區別,不能達到CSS3的那種效果。

我就不示范了,想知道那玩意兒的效果是什么樣自己試試就好。

IE的一大堆濾鏡中只有Blur這個濾鏡可以達到類似的效果,可是如果把Blur直接用在元素上會讓內容也模糊了,所以我們要創建一個新元素對它Blur,讓后再把這個新元素置入原元素的底下作為背景。

這就涉及到一堆坐標計算,如果居中的元素使用投影效果,還涉及到瀏覽器調整大小時元素的位移計算。

所以IE實現它最好用JS寫。

我已經把注釋寫的很詳細了,看這個代碼應該就可以明白。

CSS Code復制內容到剪貼板

    !DOCTYPE style .shadow { width:100px;height:100px;text-align:center; font:14px/100px 微軟雅黑; border:1px solid #CCC; background:#FFF; position:relative; } .shadow-IE { display:block; position:absolute;background:#CCC; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=5); } /style div class=shadow次碳酸鈷/div script //判斷IE var isIE=/MSIE/i.test(navigator.userAgent); if(isIE){ //獲取全部元素,其實可以用document.all的,不過習慣這樣寫 var all=document.getElementsByTagName(*),s=[],i=0; //把class為shadow的元素全放進s這個數組中 while(o=all[i ])if(o.className==shadow)s.push(o); //遍歷s數組 for(i in s){ //創建一個元素,我習慣用u,其實用什么都可以 var o=s[i],u=document.createElement(u); //把父元素設置成相對定位 o.parentNode.style.position=relative; //對IE6、7要加個hasLayout,不然坐標計算會出錯 o.parentNode.style.zoom=1; //把創建的元素放到shadow元素的上方 //一定要是上方,因為下面的元素會擋住上面的元素 o.parentNode.insertBefore(u,o); //給創建的元素應用個樣式 u.className=shadow-IE; //把寬度和高度設置到創建的元素上 u.style.width=o.offsetWidth px; u.style.height=o.offsetHeight px; }; //當窗口改變大小時觸發 window.resize=function(){ //遍歷s數組 for(i in s){ //我們在上面創建的元素移動到需要的位置 var o=s[i],p=o.previousSibling; p.style.top=o.offsetTop-5 px, p.style.left=o.offsetLeft-5 px; }; }; //主動觸發一次這個事件,讓里面的代碼在加載時執行一次 window.resize(); }; /script

不要看到一堆JS就害怕了,其實去掉注釋也沒幾行,如果用jQuery寫就更少了。

這個代碼只是隨手寫的,如果真要使用的話別丟在全局作用域里,應該讓DOMReady去調用它。

這樣可以降低變量沖突的概率。

還有事件我是直接寫到DOM上的,當然如果有需要可以使用attachEvent去綁定避免沖突,用jQuery就可以不考慮這個了。

總之,代碼只是個參考,真正在使用的時候請盡情的蹂躪它吧~

版權聲明:本文由 劍修筠 整理編輯。

原標題:lr漸變濾鏡如何使用,lr漸變濾鏡

轉載注明出處:http://www.dn9ww09s.icu/fault/12603.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 華為mate10pro是曲屏么,麒麟970和驍龍710跑分

    華為mate10pro是曲屏么,麒麟970和驍龍710跑分 相關圖片驍龍710對應麒麟小龍710和麒麟970之間哪個最好?這是眾多Android手機用戶選擇其他品牌和華為的重要依據之一。對于小龍系列,我們會很清楚的。定位為中高端次旗艦機型的是CP麒麟970和...

  • 網頁設計未來趨勢,未來網頁設計的發展方向

    網頁設計未來趨勢,未來網頁設計的發展方向 相關圖片網頁設計發展前景如何@陳子目移動設備的大規模推廣應用,逐步增加了個人用戶和企業用戶對移動設備的依賴,這也使得相關技術企業和開發商近年來在B2B和B2C領域不斷加強技術支持。...

  • round函數有什么用,函數round怎么用

    round函數有什么用,函數round怎么用 相關圖片rounddouble函數怎么用Round是一種函數,在多種編程語言中都很有用。在常用的辦公軟件Excel中,也有圓函數。在Excel中,round函數是一個基本函數,它根據指定的位數輸入值怎么用round函數...

  • Java編程,g代碼編程詳解

    Java編程,g代碼編程詳解 相關圖片宏程序編程一百例隨著CSS的發展,CSS具有語義命名約定和CSS層的分離,這將有助于CSS的可擴展性、性能改進和代碼管理。在我之前的文章中討論的許多CSS問題可以通過使用合適的編程初...

  • fastboot mode不動,fastboot mode

    fastboot mode不動,fastboot mode 相關圖片魅族fastbootmode不動Android手機最大的特點是可以自由刷卡,但仍存在一些困難和風險。例如,有些用戶在刷卡過程中打開FastBoot模式界面,然后就無法移動。在這種情況下我們該怎fastboo...

  • win10屏幕自定義分辨率,win10強制分辨率

    win10屏幕自定義分辨率,win10強制分辨率 相關圖片win10分辨率調不了如果您是win10用戶,當您發現桌面上的圖標太大或太小,或者桌面不夠清晰時,我們需要設置分辨率。如何設置win10分辨率?未知用戶可以一起了解win10 如何調整分辨率...

  • 壓縮袋怎么用,好用的壓縮解壓軟件

    壓縮袋怎么用,好用的壓縮解壓軟件 相關圖片壓縮面怎樣使用我不知道你是否用過苗條女孩。它特別用于壓縮HTML超文本文件和腳本文件。據說它的壓縮率已達到15%以上。我試過了。有些文件(大文件)的壓縮率實際上是50%。我比壓...

  • win7系統不兼容怎么辦,文件與windows7不兼容

    win7系統不兼容怎么辦,文件與windows7不兼容 相關圖片軟件與電腦系統不兼容當一些用戶安裝軟件或游戲時,他們將收到一條錯誤消息,說明此文件的版本與正在運行的Windows不兼容。在這種情況下,壓縮文件不兼容,或者安裝軟件不兼容。...

  • vbhtml,vb6解析html

    vbhtml,vb6解析html 相關圖片打開vbPrivate Sub Command1_Click()WebBrowser1.導航http://localhost/Timer1.Enabled=TrueEnvb net...

  • steam錯誤代碼-100解決,steam錯誤代碼-21解決

    steam錯誤代碼-100解決,steam錯誤代碼-21解決 相關圖片steam錯誤代碼137當你玩一些國外的游戲時,你通常需要使用游戲平臺steam。雖然國內使用不是很強大,但游戲資源相當豐富。可能是因為steam的服務器在國外,所以當用戶使用steasteam老是...

熱評文章

  • error522啥意思,522error怎么解決

    error522啥意思,522error怎么解決 相關圖片網頁error522如今,許多網民也開始建立自己的網站。在網站運營過程中,有時會出現各種各樣的問題。例如,一個網民的網站在打開時遇到錯誤522。錯誤522是什么意思?錯誤522error...

  • hp筆記本如何進bios,惠普電腦進bios

    hp筆記本如何進bios,惠普電腦進bios 相關圖片hp工作站進bios有時,由于一些設置問題,筆記本電腦需要進入BIOS進行設置。我相信許多惠普筆記本用戶不知道如何進入BIOS。惠普筆記本電腦進入BIOS的方式非常簡單:1。筆記本hp進bios按...

  • html5,html

    html5,html 相關圖片html解析原理HTML5和CSS3的時代即將到來。2011年淘寶新主頁全部使用了HTML5。擁抱變革是王道。我有很好的翻譯。讀完后,我覺得我明白了很多。我強烈推薦其他的童鞋,html5上傳原理...

  • arcore支持的手機,什么手機支持carplay

    arcore支持的手機,什么手機支持carplay 相關圖片華為手機里的arcore是什么有網友在應用市場發現了一個阿科爾應用。阿科爾是什么?Arcore是谷歌為構建增強現實應用而推出的一個軟件平臺,蘋果平臺也有類似的arkit。arcore的主要功什么...

  • 語法規則,什么是語法

    語法規則,什么是語法 相關圖片基礎語法一。HTML5不區分大小寫。這是我的2號。HTML5省略斜線來關閉空元素。空元素是不嵌套內容的元素,例如:3。屬性的語法規則。只要屬性值不包含限定字符(如(=或語法的組合規...

  • steam錯誤代碼-100解決,steam錯誤代碼-21解決

    steam錯誤代碼-100解決,steam錯誤代碼-21解決 相關圖片steam錯誤代碼137吃雞游戲《絕地生存》讓更多玩家開始接觸steam平臺,用戶群也更多。當然,在使用蒸汽的過程中會出現更多的錯誤情況。不過,還是有一些人不熟悉蒸汽,所以遇到蒸汽...

  • windows 找不到文件,windows找不到文件msdt

    windows 找不到文件,windows找不到文件msdt 相關圖片windowsWindows找不到本文中提到的文件。請確保文件名正確,然后重試。當用戶搜索元素文件時,情況并非如此,但當用戶移動文件時,會彈出提示。有些用戶不知道當計算機處于windows資...

  • 全方位了解,全方位

    全方位了解,全方位 相關圖片如何全方位了解公司這是一個adobe建議:CSS區域,它提供了一種在多個不同元素中排列內容的方法首先,需要為內容容器的flow屬性聲明一個唯一的字符值,然后使用from()函數和全方面...

  • 無法正常啟動0xc0000022,0x00000022

    無法正常啟動0xc0000022,0x00000022 相關圖片win10 0xc0000022有時當用戶打開計算機上的某個軟件時,會出現一條錯誤消息,說明應用程序無法正常啟動0xc0000022。在這種情況下我們該怎么辦?讓我們看看應用程序如何無法正常啟0xc00...

  • 不能雙擊選中,雙擊選中

    不能雙擊選中,雙擊選中 相關圖片CAD怎么雙擊取消選擇FF的樣式:-Moz user select:none;對于FF以外的瀏覽器:onselectstart=returnfalse(直接添加到所需標簽中)例如:d雙擊PS是什么意思...

關注微信

变脸官网查询