jquery设置div半透明背景色与文字不透明

发布时间:2020-09-11编辑:脚本学堂
使用jquery设置div半透明背景色,以及文字不透明效果的方法,感兴趣的朋友参考下。

以下代码,不修改dom结构,实现div的背景半透明,文字不透明效果。

例子,div设置opacity属性会导致内部文字也透明。
 

复制代码 代码示例:

// 把16进制颜色转换成rgb格式
  var colorToRGB = function(color){
      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/g;
      var sColor = color.toLowerCase();
      if(sColor && reg.test(sColor)){
          if(sColor.length === 4){
              var sColorNew = "#";
              for(var i=1; i<4; i+=1){
                  sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
              }
              sColor = sColorNew;
          } www.jb200.com
          //处理六位的颜色值
          var sColorChange = [];
          for(var i=1; i<7; i+=2){
              sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
          }
          return sColorChange.join(",");
      }else{
          return color;
      }
  }

  var setBakckgoundAndOpacity = function(obj,color,opacity){
      var rgbaObj = colorToRGB(color);
      if(jquery.browser.msie&&parseInt(jQuery.browser.version)<9){
          // 针对ie 6,7,8 通过设置内部元素position:relative;可以避免被父节点的opacity影响
          jQuery(obj).children().each(function(){
              if(jQuery(this).css('position') == 'static'){
                  jQuery(this).css('position','relative');
              }
          });
          jQuery(obj).css({
              'background':color,
              'opacity':opacity
          });
      }else{
          // 支持rgba颜色格式的浏览器用rgba设置透明背景色
         
          jQuery(obj).css({
              'background':'rgba('+colorToRGB(color)+','+opacity+')'
          });
      }
  }
 
  setBakckgoundAndOpacity($(div),'#000000','0.6');