CSS背景颜色属性值转换

<!DOCTYPE html>

<html><head><meta charset="UTF-8">

<title>CSS背景颜色属性值转换</title>

<style type="text/css">

.top_tips { position:relative; width:1000px; margin:20px auto; padding:10px; color:#272727; border:1px dashed #99CC29; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background-color:#F0F0F0; zoom:1; }
.top_tips:after { clear:both; display:block; content:"."; height:0; visibility:hidden; font-size:0; line-height:0; }
.top_tips:hover { color:#000000; border-color:#99CC29; background-color:#E0E0E0; }
.top_tips:hover h1 { color:#B50000; }

h2 { font-size:14px; }
p { margin:0; line-height:20px; font-size:12px; }
label { color:#F32600; }
label, button { cursor:pointer; }
input { width:100px; height:18px; text-align:center; font-family:Tahoma; font-size:12px; color:#F32600; }
#alpha_style {  height:100px; margin-top:20px; line-height:20px; padding:5px; font-size:13px; font-family:Tahoma; color:#A6CAF0; border:1px solid #FFFFFF; background-color:#272727; }
#simple { width:200px; height:100px; overflow:hidden; text-align:center; line-height:100px; }
.wrap { width:1028px; overflow:hidden; margin:20px auto 20px; zoom:1; }
#tip { display:none; position:absolute; top:48px; left:10px; width:400px; padding:10px; color:#FFFFFF; background:rgba(39,39,39,0.8); background:#272727\0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
#tip:after { position:absolute; bottom:-5px; right:185px; width:0; height:0; content:""; display:block; border-top:5px solid #525252; border-top:5px solid #272727\0; border-left:5px solid transparent; border-right:5px solid transparent; }
#tip_alphe { display:none; position:absolute; top:183px; left:358px; width:200px; padding:10px; color:#FFFFFF; background:rgba(39,39,39,0.8); background:#272727\0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
#tip_alphe:after { position:absolute; top:-5px; left:35px; width:0; height:0; content:""; display:block; border-bottom:5px solid #525252; border-bottom:5px solid #272727\0; border-left:5px solid transparent; border-right:5px solid transparent; }
</style>
</head>

<body>

<div id="main">

  <div id="body" class="light">
    <div id="content" class="show">
      <div class="top_tips">

        <h2>实现背景色透明效果的代码</h2>
        <p>实现各个浏览器中具备良好的透明特性的效果，IE中使用私有滤镜filter，高端浏览器使用CSS3中的rgba属性。</p>
        <p>输入十六进制的颜色值以及透明度，自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算。</p>
        <p><strong>说明：</strong></p>
        <p><strong>1.样式名选项，</strong>例如：.rgba，填样式名选项后会自动导出IE9的兼容方案，不填样式名直接输出样式属性，请自己写IE9的hack</p>
        <p>单独把 IE9 的 filter 变成透明度为 0 即可。高级浏览器大部分支持 :root 伪类，但不支持 filter 属性，而 IE 只有 IE9 支持，所以我们可以这样写。代码如下：</p>
        <pre>:root .rgba{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#00000000‘, EndColorStr=‘#00000000‘);  }</pre>
        <p><strong>2.颜色值选项</strong>：十六进制是从【0】到【9】以及【a】到【f】组合而成的，再来一次吧！\n如果是十六进制的缩写，是前后相邻的字母可简写成为一个，例如【#FF000FF】可转为【#F0F】\n请检查你的颜色值是否为【三位】或者符合【十六进制的组合方式】。</p>
        <p><strong>3.透明度现象：</strong>透明度的值在【0】到【1】之间。</p>
<p>&nbsp;</p>
        <div id="tip" onclick="this.style.display='none'" onmouseout="this.style.display='none'" style="display: none;">十六进制是从【0】到【9】以及【a】到【f】组合而成的，再来一次吧！
如果是十六进制的缩写，是前后相邻的字母可简写成为一个，例如【#FF000FF】可转为【#F0F】
请检查你的颜色值是否为【三位】或者符合【十六进制的组合方式】。</div>
        <div id="tip_alphe" onclick="this.style.display='none'" onmouseout="this.style.display='none'"></div>
      </div>
      <div class="wrap">
        <label for="class-name">样式名：</label>
        <input type="text" value="" id="class-name">
        <label for="color_value">需要透明的颜色十六进制值：#</label>
        <input type="text" value="" id="color_value" maxlength="6">
        <label for="original">透明度：</label>
        <input type="input" id="original">
        <button type="button" onclick="change_10_to_16()">转为16进制的颜色</button>
        <br>
        <div id="alpha_style">aa{filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#33000000‘, endColorstr=‘#33000000‘);background:rgba(0,0,0,0.2);}<br> :root aa{filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#00000000‘, endColorstr=‘#00000000‘);}/*for IE9*/<br>或者ie9的hack使用： <br> :root aa{filter:none;}/*for IE9*/</div>
      </div>

      <script type="text/javascript">

          var oOriginal = document.getElementById("original");

          var co_value = document.getElementById("color_value");

          var css_cont = document.getElementById("alpha_style");

          var warn_tip = document.getElementById("tip");

          var warn_tip_a = document.getElementById("tip_alphe");
          var classVal = document.getElementById("class-name");

          function change_10_to_16() {

              var pattern = /^[0-9a-fA-F]{6}$/;

              var pattern_3 = /^[0-9a-fA-F]{3}$/;

              var co = co_value.value;

              var num = Math.floor((Math.floor(oOriginal.value * 100) / 100) * 255);

              var num_10 = (Math.floor(oOriginal.value * 100) / 100);

              var num_change = num.toString(16);

              var txt = ‘‘;

              num = parseInt(num);

              if (co.match(pattern) == null) {

                  if (co.length == 3) {

                      if (co.match(pattern_3) == null) {

                          warn_tip.innerHTML = "十六进制是从【0】到【9】以及【a】到【f】组合而成的，再来一次吧！\n如果是十六进制的缩写，是前后相邻的字母可简写成为一个，例如【#FF000FF】可转为【#F0F】\n请检查你的颜色值是否为【三位】或者符合【十六进制的组合方式】。";

                      } else {

                          if (oOriginal.value >= 0 && oOriginal.value <= 1) {

                              if (num_change.length == 1) {

                                  num_change = "0" + num_change;

                              }

                              var co_a = co.substring(0, 1);

                              var co_b = co.substring(1, 2);

                              var co_c = co.substring(2, 3);

                              var co_a2 = co_a + co_a;

                              var co_b2 = co_b + co_b;

                              var co_c2 = co_c + co_c;

                              co = co_a2 + co_b2 + co_c2;
                              var outText="";
                      if(classVal.value==""){
                          outText="filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#" + num_change.toUpperCase() + co.toUpperCase() + "‘, endColorstr=‘#" + num_change.toUpperCase() + co.toUpperCase() + "‘);background:rgba(" + parseInt(co_a2, 16) + "," + parseInt(co_b2, 16) + "," + parseInt(co_c2, 16) + "," + num_10 + ");";

                      }else{
                        outText=classVal.value+"{filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#" + num_change.toUpperCase() + co.toUpperCase() + "‘, endColorstr=‘#" + num_change.toUpperCase() + co.toUpperCase() + "‘);background:rgba(" + parseInt(co_a2, 16) + "," + parseInt(co_b2, 16) + "," + parseInt(co_c2, 16) + "," + num_10 + ");}";
                              outText+="<br /> :root "+classVal.value+"{filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#00" + co.toUpperCase() + "‘, endColorstr=‘#00" + co.toUpperCase() + "‘);}/*for IE9*/";
                      outText+="<br />或者ie9的hack使用： <br /> :root "+classVal.value+"{filter:none;}/*for IE9*/";
                      }

                              css_cont.innerHTML = outText;

                              /*temp_cont = css_cont.value;

                              txt += css_cont.innerHTML;

                              if (css_cont.value == "" || css_cont.value != txt) {

                                  css_cont.value = txt;

                              }*/

                          } else {

                              warn_tip_a.style.display = "block";

                              warn_tip_a.innerHTML = "透明度的值在【0】到【1】之间。";

                          }

                      }

                  } else {

                      warn_tip.style.display = "block";

                      warn_tip.innerHTML = "十六进制是从【0】到【9】以及【a】到【f】组合而成的，再来一次吧！\n如果是十六进制的缩写，是前后相邻的字母可简写成为一个，例如【#FF000FF】可转为【#F0F】\n请检查你的颜色值是否为【三位】或者符合【十六进制的组合方式】。";

                  }

              } else {

                  if (oOriginal.value >= 0 && oOriginal.value <= 1) {

                      if (num_change.length == 1) {

                          num_change = "0" + String(num_change);

                      }

                      var co_a = co.substring(0, 2);

                      var co_b = co.substring(2, 4);

                      var co_c = co.substring(4, 6);
                      var outText="";
                      if(classVal.value==""){
                          outText="filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#" + num_change.toUpperCase() + co.toUpperCase() + "‘, endColorstr=‘#" + num_change.toUpperCase() + co.toUpperCase() + "‘);background:rgba(" + parseInt(co_a, 16) + "," + parseInt(co_b, 16) + "," + parseInt(co_c, 16) + "," + num_10 + ");";

                      }else{
                        outText=classVal.value+"{filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#" + num_change.toUpperCase() + co.toUpperCase() + "‘, endColorstr=‘#" + num_change.toUpperCase() + co.toUpperCase() + "‘);background:rgba(" + parseInt(co_a, 16) + "," + parseInt(co_b, 16) + "," + parseInt(co_c, 16) + "," + num_10 + ");}";

                        outText+="<br /> :root "+classVal.value+"{filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#00" + co.toUpperCase() + "‘, endColorstr=‘#00" + co.toUpperCase() + "‘);}/*for IE9*/";
                          outText+="<br />或者ie9的hack使用： <br /> :root "+classVal.value+"{filter:none;}/*for IE9*/";
                      }

                      css_cont.innerHTML = outText;
                      //css_cont.innerHTML = "filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#" + num_change.toUpperCase() + co.toUpperCase() + "‘, endColorstr=‘#" + num_change.toUpperCase() + co.toUpperCase() + "‘);background:rgba(" + parseInt(co_a, 16) + "," + parseInt(co_b, 16) + "," + parseInt(co_c, 16) + "," + num_10 + ");";

                      temp_cont = css_cont.value;

                      txt += css_cont.innerHTML;

                      if (css_cont.value == "" || css_cont.value != txt) {

                          css_cont.value = txt;

                      }

                  } else {

                      warn_tip_a.style.display = "block";

                      warn_tip_a.innerHTML = "透明度的值在【0】到【1】之间。";

                  }

              }

          }
</script>
    </div>
  </div>
</div>
时间： 2024-10-21 22:16:03

CSS背景颜色属性值转换的相关文章

熟悉css/css3颜色属性

原文:熟悉css/css3颜色属性 颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & HSLA 颜色名 十六进制色 个人最喜欢的一种颜色表达方式. 十六进制颜色是这样规定的:#RRGGBB,其中的RR(红色).GG(绿色).BB(蓝色)十六进制整数规定了颜色的成分.所有值必须介于 0 与 FF 之间. 生成随机颜色: function getRandom

CSS背景颜色、背景图片、平铺、定位、固定

CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片 路径不在说明了! CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat) background-repeat:repeat-x;如设置x轴平铺: background-repeat:no-repeat如设置不平铺: CSS背景图片定位设

HTML+CSS笔记 CSS中级 颜色&长度值

颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数. 每

关于CSS背景background属性经典的配置

background background-color: transparent; background-image: url("/assets/images/phonetitle1.gif"); background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-clip: border-box; background-origin: padding-box;

利用rgba和filter设置CSS背景颜色半透明且不影响子元素，兼容IE6-8

目的需要,需要一个背景半透明的效果,于是马上想到"opacity:0.5″等等,为兼容IE可能还会用到filter,如: filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; 上面的是可以达到半透明的效果,但是会影响里面的子元素也半透明,例如DIV里面的文字也半透明了,这不是我想要的 上英文google.com翻阅半天,稍加总结和修改,终于功夫不负有心人,实现了可以兼容各浏览器,达到背景颜色半透明而不影响子元素的代码,如下: bac

CSS 3 颜色属性

====================================================================================== 1. rgba (rgb, a(透明度)): 2. HSL (色相[0-360],饱和度[0-100%],亮度[0-100%]) 3. HSLa ===================================================================================== opac

div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器

针对透明背景,包括背景图片和背景色(兼容IE,FF,OP等浏览器) 一.背景完全透明 .bg{background:transparent } 二.背景半透明 这里要分两个div,一个单独设置背景透明度,另外一个放内容 margin-top:-33px;使用这个方法让文字叠加在透明背景图上. css: .bg{ width: 1000px; height:33px; background-color:#fffff; background-image:url(img.jpg);filter:alp

css背景颜色动态渐变实例

1.https://www.imooc.com/article/27831 2.https://blog.csdn.net/lolgenius/article/details/70169493 3.https://www.lanrenzhijia.com/js/3905.html 4.https://www.html5tricks.com/html5-3d-bubble-menu.html 5.条纹背景 6.背景色从做慢慢移到右 原文地址:https://www.cnblogs.com/lile

css背景颜色渐变

1.效果 2.代码 /* 基本色 */ background: #3FB0AC; /* chrome 2+, safari 4+; multiple color stops */ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(1, #3FB0AC), color-stop(1, #C5D7A1)); /* chrome 10+, safari 5.1+ */ background-image