css 背景透明文字(內容)不透明三種實現方法

好久沒寫博客了。以前還想着最少一個月抽空寫幾篇。結果沒做到O(∩_∩)O~~。好吧。現在努力，繼續堅持。

看着以前寫的東西，感覺自己在逐漸成長。

先上圖:

本文主要記錄如上圖一樣的。文字或內容不透明，但背景有一個“透明蒙版”的效果。

平時一般用的方法有三種：

① 先創建一個透明度跟“透明蒙版”一樣的1X1大小的透明png圖片。然后采用填充背景圖的方法(repeat)，實現背景透明而不影響文字的透明性。

優點：感覺兼容性最好。

缺點：要多弄一張透明圖片。

這個就不寫樣式了。比較簡單。

②采用opacity透明度。當然，要使文字不透明opacity不能加在父容器里，可以多加一個子標簽或使用偽類實現。具體的方法就是使用絕對定位把需要透明的子標簽或偽類覆蓋在容器上。再設置z-index:-1,父容易設置z-index:0;

值得注意的是，當透明度加在偽類的時候，ie8是不支持的。

優點：兼容性較好。

缺點：要多加偽類或標簽，使用偽類 ie8不支持。使用標簽則需要多加一個標簽。

使用的opacoty代碼為

css：

filter:alpha(opacity=50); opacity:0.5;-moz-opacity:0.5;

sass：調用 ：@include opacity(50);

@mixin opacity($pre:0){
filter:alpha(opacity=$pre); opacity:$pre/100;-moz-opacity:$pre/100;
}

③使用濾鏡跟rgba透明顏色實現。(目前使用)

優點：不會有多余的標簽。兼容性也可以。

缺點：ie9同時兼容了濾鏡和rgba所以在ie9上透明度顏色會重疊(顏色顯得更深)，濾鏡采用的十六進制顏色代碼要計算。

css：

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00FFFFFF', endColorstr='#00FFFFFF');background-color:rgba(255,255,255,0);

sass：調用：@include bgcolor(#000000,0.5);

@mixin bgcolor($color,$opacity){
    $num:floor($opacity*255);
    $sixteen:tenToSixteen($num);
    $colorStr:'#'+$sixteen+str-slice('#{$color}',2);
    filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{$colorStr}', endColorstr='#{$colorStr}');background-color:rgba($color,$opacity);
}
@function tenToSixteen($num){
    $sixteen:"00","01","02","03","04","05","06","07","08","09","0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19","1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29","2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39","3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49","4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59","5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69","6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79","7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89","8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99","9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9","AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9","BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9","CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9","DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9","EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9","FA","FB","FC","FD","FE","FF";
    @return nth($sixteen,$num+1)
}

平時用sass封裝方法不多，所以遇到了一些坑：

1、sass的raga函數顏色值不能接受一個string類型的值，而濾鏡需要計算十六進制的值然后進行組合字符串。所以當時考慮顏色參數是帶#還是不帶#遇到了問題。帶#號rgba函數不會報錯(如果參數使用帶引號的會報錯)。但濾鏡哪里的顏色值就不好搞了。后來又看了下文檔。才終於找到str-slice()函數把顏色值的#排除掉了。

2、濾鏡中的顏色是#AARRGGBB形式的。其中RRGGBB代表的就是十六進制的顏色值。即平時使用的FFFFFF之類的值。主要是其中的AA這個對應的是rgba中的a是轉換成十六進制后的顏色，如果不明白，不用急，只需兩步就可以算出來。繼續看：

①算出透明度相對於十進制的位置(0-255) ：floor($opacity*255); 例如：透明度是 0.5 那么相對於十進制的位置就是127。

②找出對應的十六進制字符。因為沒有找到相應的轉換函數。所以只能自己寫一個咯。就是上面的 @function tenToSixteen($num)。如上面的127。就是這里函數里對應的第128個(從1開始)。函數列舉了0-255的十進制對應的十六進制(比較傻的做法)。還可以用算法算出對應的十六進制的。考慮到256個也不是很多，也懶得算了。直接就全部列舉出來就好了。

 

感覺還有很多不足的地方。請高手不吝賜教。

THE END