使用單通道實現半透明效果

2021-05-11 12:47:09 字數 1527 閱讀 8798

眾所周知,ie 6只支援單通道的png(即只有透明/不透明2種狀態,gif的透明單通道透明),因此如果需要使用alpha透明的png時,往往需要對ie6設定濾鏡來完成。

先看下效果圖:

a:hover有半透明的背景色,對於大部分瀏覽器,都可以使用alpha透明的png-32來完成此效果,而對於ie6,可以採取乙個變通的辦法,使用一種柵格的方法來模擬半透明。

在fireworks裡面建立乙個透明背景的檔案,就可以看到畫布內顯示的是白色和灰色交加的圖案,如下圖所示。

其實這就是我們借鑑的原理——白色為不透明區域,灰色區域為透明區域——來模擬半透明的效果,如下圖所示。

製作方法有很多種,在此介紹一種:

1.在fireworks內新建乙個2px寬2px高的新檔案,如下圖所示。

2.使用矩形向量工具畫2個1px寬高的正方形,顏色為黑色,如下圖所示。

3.儲存檔案(bg1.png )。

4.在設計稿內,取乙個背景色顏色值,位置如下圖所示(顏色值為比較平均的顏色,可能需要反覆嘗試)。

5.再新建乙個新檔案,如下圖所示(尺寸根據實際情況而定,原始檔 )。

6.畫乙個和檔案尺寸一樣的矩形,如下圖所示。

7.匯出為png-8檔案,優化設定如下圖(也可以儲存為gif)。

8.在css應用此檔案檢視效果,如果顏色不合適,可以調整。

在此不再贅述css的寫法。

這個方法適用在背景顏色比較單純的情況,如果是顏色豐富的**,其上的文字可能會不清晰,如下圖所示。

—-檢視示例 —-

Unity Shader 實現半透明效果

想要實現如下效果 主角可以遮擋背景,背景遮擋主角時候半透明混合 研究了一周,shader知識了解從無到稍稍入門,終於解決了,記錄一下實現方案。使用blend one oneminussrcalpha指令,也就是srccolor dstcolor 1 srcalpha 假設a和b重疊,先渲染a,然後渲...

QT 透明 半透明 效果

objwindow setwindowopacity 只對視窗有效,setattribute qt wa translucentbackground,true 對於視窗widget必須設定為qt framelesswindowhint include qgraphicsopacityeffect o...

osg中實現半透明效果

在為球貼圖的基礎上,實現模擬地球的透明展示。是先前效果如下 實現後效果如下 實現 如下,主要是在狀態集中進行設定 osg ref ptrblendfunc new osg blendfunc blendfunc setsource osg blendfunc src alpha blendfunc ...