使用CSS cross-fade()實現背景圖像半透明效果的示例代碼_CSS教程_CSS_網頁制作

來源:腳本之家  責任編輯:小易  

安全警告 1、現場操作必須遵守《電力安全工具預試規程》工作要求。2、使用前必須對儀器進行自檢,發射器、接收器電池必須充足,否則影響發射及接收靈敏度。3、使用過程中不能大于有效接收距離,發射器盡量置于開闊處。4、使用過程中避免無線電發射裝置使用,以免干擾接收器無法判別。5、在試驗時,試驗人員穿絕緣鞋且處在安全距離以外區域。工作原理和使用接線圖 規 格 技 術 1、室內校驗方式 a、取出射器X和發射器Y連接高壓輸出桿(內置發射天線),通過儀器提供的測試線一端兩個小夾子分別聯接發射器X和發射器彎鉤上。一頭插入220V電源后(因為220V一相火線,改成雙火線,電壓低)、打開接收器電源開關。出現波形后可認為儀器正常.2、現場使用 a.使用前必須遵守《電力安全工具預防性試驗規程》工作要求。b.將發射器X和發射器Y分別連接絕緣桿(絕緣桿伸出長度根據電壓使用)c.打開接收器電源開關,接收器自動跟蹤顯示X、Y相的波形曲線。顯示X、Y相之間相位差。(≤20度為同相,>20度為異相)并顯示同相或不同相。接收器顯示圖 一、技術參數及部件功能說明 1.技術參數 使用范圍:10V~110kV 試品狀態:線路或設備帶電部分 離地高度:小于20米 發射器之間最大距離:小于100米,配軟天線一支、可插入接收器后部。接收效果更好。特別由于現場干擾情況下。2.發射器 外型尺寸:Φ40×110 電源電池(鈕扣AG13×5個)3、接受器 外型尺寸:78×170×35 電源電池(8.4V鎳氫充電電池)4、絕緣桿 2根(伸縮桿)適用范圍:10V~110kV 絕緣桿由環氧樹脂構成,長度每根3.2米(每根由5節組成),每節頂端桿子內置高壓天線三十厘米左右。絕緣桿指定專業廠家生產,試驗電壓符合國際電工委員會IEC60855和國際GB113398-92《帶電作業用絕緣桿通用技術條件》。絕緣桿工頻耐壓試驗參考表 電壓等級 絕緣桿有效絕緣長度 1分鐘工頻耐壓 10kV及以下 700mm(頂節內置天線)45kV 35kV 900mm(頂節內置天線)95kV 110kV 2300mm(頂節內置天線)220kV 絕緣桿應定期進行工頻耐壓試驗,并且進行外觀檢查,應無劃痕、斷裂,等異樣。存放于干燥通風處。二、使用說明 1、自檢 a.使用之前取出發射器X和發射器Y,將自檢線一端接入220V電源,另一端分別連接發射器X和發射器Y的掛勾。連接絕緣桿。b.打開接收器,顯示起始波形后即可。2.現場使用 a.使用前必須遵守《電力安全工具預防性試驗規程》工作要求。b.將發射器X和發射器Y分別連接絕緣桿。根據電壓自選長度。掛到高壓相線上。c.打開接收器電源開關,即可顯示測試結果。三、產品成套性 發射器X 1只 發射器Y 1只 接收器 1只 充電器 1只 測試線 1根 包裝箱 1只 接收軟天線 1根 四、注意事項 1、現場操作必須遵守《電力安全工具預試規程》工作要求 2、使用過程中避免同時使用無線電發射裝置(對講機等),以免干擾接收器www.anxorj.tw防采集請勿采集本網。

一、需求描述

flavin adenine dinucleotide(FAD)黃素腺嘌呤二核苷酸 和NAD類似,也是輔酶,更強的還原輔助因子,是VB2的活性衍生態 FAD 完全氧化態 FADH 半還原態 FADH2 還原態 他們主要作用是氧化磷酸化,電子傳遞鏈中

某元素,希望 background-image 背景圖片是半透明的,但是,元素里面的其他內容,例如文字,圖標之類的還是不透明。

fad 英[f?d] 美[f?d] n.時尚;一時的愛好;一時流行的狂熱 更多釋義>> [網絡短語] FAD 黃素腺嘌呤二核苷酸(Flavin Adenine Dinucleotide),時尚,家庭功能評定量表(Family Assessment Device)

如果是純色背景或者是CSS漸變背景,很好處理,使用 rgba 或者 hsla 顏色色值即可。

1、回2113答如下: (1)PAD:經過新風處理機處理的5261二次鮮風的風管。4102 (2)SAD:送風管。(3)FAD:從街外抽1653取的鮮風(未作任何處理)的風管。(4)RAD:回風管。2、這是不同系統

但是,如果是 url() 背景圖像,似乎就無能為力了。

E不是β-氧化所需的輔助因子。β-氧化是指脂酰CoA進入線粒體基質后,在脂肪酸β-氧化酶系催化下進行氧化分解,由于氧化是在脂;摩-碳原子上的發生的,故稱β-氧化。β-氧化過程需要NAD、FAD

如果是個內聯的 <img> 圖像那很好處理,無論是filter濾鏡、 mask遮罩 還是 opacity 透明度設置都可以實現我們的效果,但是偏偏這里是背景圖像,所有前面提到的這些方法都會影響文字的正常顯示。

我估計很多人會想到使用 ::before / ::after 偽元素實現,例如:

.box { position: relative; z-index: 0;}.box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(xxx.jpg) no-repeat center / contain; z-index: -1; opacity: .5;}

實時效果如下(如果沒有效果請訪問原文 作者張鑫旭 ):

by-zhangxinxu

但是這個方法太啰嗦,成本太高(創建了大量的層疊上下文、尺寸是不是需要調整),無法大規模使用。

有沒有什么好的實現方法呢?

試試使用 cross-fade() 圖像函數。

二、cross-fade()實現背景圖像半透明

cross-fade() 函數可以讓兩張圖像半透明混合。

例如:

<div class="cross-fade-image"></div>

.cross-fade-image { width: 300px; height: 300px; background: no-repeat center / contain; background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%); background-image: cross-fade(url(1.jpg), url(2.jpg), 50%); }

就會有下圖所示的效果。

2.jpg 這張圖以50%的透明度和 1.jpg 進行了混合渲染。

上面案例使用的是 cross-fade() 函數的傳統語法,具體如下:

<dfn id="ltimage-combination"><image-combination></dfn> = cross-fade( <image>, <image>, <percentage> )

其中 <percentage> 指的是透明度,只會改變第2個圖像的透明度,最終的效果是第1個圖像完全不透明和第2個圖像半透明疊加的效果。

關于 cross-fade() 圖像函數中的百分比值改變的僅僅是后面一個圖像的透明度,我很久以前做過一個demo頁面進行過測試,您可以狠狠地點擊這里: CSS3 cross-fade屬性透明度作用對象測試

示意截圖如下:

雖然 cross-fade() 函數設計的初衷是多個圖像半透明疊加,但是,這樣的場景實際開發很少遇到,因此, cross-fade() 反而更適合控制單個背景圖像的半透明效果。

實現原理很簡單,第1張圖使用透明圖片,第2張圖使用目標圖片就可以了。

舉個例子:

某背景圖在黑暗模式下太亮了,希望調整下背景圖的明暗度,使用 cross-fade() 函數實現就是下面這段CSS代碼(寬高設置的CSS略):

.dark { /* 兜底,IE和Firefox瀏覽器 */ background-image: url(2.jpg); --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* Safari最近版本已經不需要私有前綴了 */ background-image: cross-fade(var(--transparent), url(2.jpg), 40%); /* 如使用自定義屬性,-webkit-語句需要放在沒有私有前綴語句的下面 */ background-image: -webkit-cross-fade(var(--transparent), url(2.jpg), 40%); background-size: cover;}

效果如下:

是不是很簡單,是不是比偽元素實現要靠譜的多,對應的demo訪問 這里 。

cross-fade() 本質上就是個 <image> 圖像數據類型,和 url() 圖像,gradient漸變圖像,image-set()函數是一個性質,可以用在 border-image , mask-image 等屬性中。

因此,使用 cross-fade() 函數替換 url() 函數實現背景圖片的半透明效果決定是成本最低,效果最好的方法。

三、移動端兼容性極佳

cross-fade() 函數webkit瀏覽器支持的非常早,iOS 5,Android 4.4均支持,只不過需要設置私有前綴,具體如下圖所示:

因此,在移動端可以放心使用,至于PC端,不需要考慮IE瀏覽器的項目也是可以放心使用的,就算需要考慮IE也沒毛病,不過就是背景圖還是完全不透明而已,視覺體驗稍微低了一點而已。

這世界上沒有所謂的沒有用的CSS屬性,只是沒有遇到合適的場景而已;就像依然單身的諸位,只是還沒有遇到合適的那個他/她而已。

另外, cross-fade() 函數加入CSS規范后有了新的語法,更靈活更強大,但是目前沒有任何瀏覽器支持,因此本文沒有做相關介紹。

到此這篇關于使用CSS cross-fade()實現背景圖像半透明效果的示例代碼的文章就介紹到這了,更多相關CSS cross-fade()背景圖像半透明內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!

內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • css3 transforms應用于背景圖像的解決方法
  • css控制背景圖像平鋪實現邊框陰影效果
  • 學習css的背景圖像屬性background-css教程-網頁制作-網頁教學網
  • css3背景圖片透明疊加屬性cross-fade簡介及用法實例
  • 汽車音響上TREBASFAD是什么意思?
  • 使用無線高壓核相儀的步驟是怎樣的?
  • 關于css制作
  • 汽車CD上BAS TRE FAD BAL·是什么意思
  • 求專業高手解釋 NAD 、 NAD+ 、 NADH 、 NADH2、和 FAD FAD+ FADH2
  • fad是什么
  • 空調通風圖紙里PAD SAD FAD RAD 表示什么?
  • 6)下列化合物中哪一個不是β-氧化所需的輔助因子? A.NAD B.肉毒堿 C.FAD D.CoA E.NADP
  • FAD可疑醫學上代表什么
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程半透明背景圖像cross-fadecsscss3 transforms應用于背景圖像的解決方法css控制背景圖像平鋪實現邊框陰影效果學習css的背景圖像屬性background-css教程-網頁制作-網頁教學網css3背景圖片透明疊加屬性cross-fade簡介及用法實例css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字如何使用html+css實現tg-vision 主頁制作解決css樣式沖突的幾個辦法(小結)css 中使用徑向漸變實現卡券效果css3里box-shadow屬性的使用方法示例詳解css垂直居中的另類實現代碼詳解(不走尋常路)css viewport 單位 實現快速布局css布局兩個button在同父標簽中左右兩側分布的方法css變量對js交互組件開發帶來的提升與變革示例代碼詳完美解決webpack打包css背景圖片路徑問題純css實現選中商品后右下角顯示√號功能
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载