CSS背景色属性値変換
89284 ワード
<!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】 ， ！
， ， 【#FF000FF】 【#F0F】
【 】 【 】。</p>
<p><strong>3. ：</strong> 【0】 【1】 。</p>
<p> </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】 ， ！
， ， 【#FF000FF】 【#F0F】
【 】 【 】。";
} 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】 ， ！
， ， 【#FF000FF】 【#F0F】
【 】 【 】。";
}
} 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>