元素半透明

2021-08-27 14:34:34 字數 519 閱讀 2936

知識擴充套件:

dximagetransform.microsoft.gradient 濾鏡裡的 startcolorstr 引數值是 #aarrggbb 形式的, 其中的aa是代表不透明度的十六進製制,00表示完全透明,ff就是全不透明,化成十進位制的範圍就是0~255,剩下的 rrggbb 就是顏色的十六進製制**。

舉例如:background: rgba(125, 0, 0, .3); 表示的是30%不透明度的紅色背景。把30%的不透明度轉換成十六制呢的方法如下:先計算#aa的的十進位制x,x/255 = 3/10,解得x=3*255/10,然後再把x換算成十六進製制,約等於4c。

常用透明度對用關係:

.0(00) .1(19) .05(0c) .15(26)

.2(33) .3(4c) .25(3f) .35(59)

.4(66) .5(7f) .45(72) .55(8c)

.6(99) .7(b2) .65(a5) .75(bf)

.8(cc) .9(e5) .85(d8) .95(f2)

焦點元素,新增半透明遮罩

備註 是替換元素,正常載入時,設定的偽元素不可見,只有當載入失敗時,其偽元素才能看到。所以需要外面套一層殼子class image wrap 在殼子上獲取焦點,新增樣式。image wrap img 半透明遮罩 mixin translucent mask color 0082f0 備註 可以用bo...

背景半透明

css中在希望半透明的部分後面新增如下 filter alpha opacity 10 moz opacity 1 opacity 0.1 句中的數字就是你希望半透明的程度,越小透明度越高。其實就是新增乙個濾鏡。三句話中第乙個是支援ie,第二個和第三個都是支援firefox的不同版本。比如說設定好背...

半透明邊框

相信大家以前都是用過css的半透明顏色,比如rgba 和hsla 但在一些屬性 比如邊框 中使用半透明顏色並沒有想象中那麼容易。我們接下來會看的 假設我們想給乙個容器設定乙個白色的背景和一道半透明的白色邊框,body的背景會從半透明的邊框透過來。我們最開始的嘗試可能是醬子的 1 test 結果如圖所...