利用rgba和filter设置半透明背景色

在设置背景颜色半透明经常用CSS的rgba和filter,写法类似这样:

background:rgba(5,7,12,0.9);filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e505070c,endcolorstr=#e505070c)
这种方式可以实现背景颜色半透明而不影响其子元素,能够兼容所以浏览器。
那么问题来了,rgba转换成16进制色值比较麻烦,这个demo就是为了解决该问题,只要输入rgba值,就能够直接生成css片段。

/* demo:  [5,7,12,0.9] => background:rgba(5,7,12,0.9);filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e505070c,endcolorstr=#e505070c) */

function rgba2Color(rgba){
    var color = ‘‘,aColor=‘‘;
    for(var i in rgba){
        if(rgba.length<=3){
            aColor=((1*255).toString(16)).substr(0,2);
            var tempColor=rgba[i].toString(16);
            color += tempColor.length == 1?‘0‘+tempColor : tempColor;
        }else if(i==3){
            aColor+=((rgba[i]*255).toString(16)).substr(0,2);
            if(aColor=="0") aColor="00";
        }else{
            var tempColor=rgba[i].toString(16);
            color += tempColor.length == 1?‘0‘+tempColor : tempColor;
        }
    }
    return "#"+aColor+color;
}
function rgbaCss(rgba){
    var color = rgba2Color(rgba);
    return "background:rgba("+rgba.join(‘,‘)+");filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr="+color+",endcolorstr="+color+")";
}
console.log(rgbaCss([5,7,12,0.9]));

时间: 2024-11-09 13:59:04

利用rgba和filter设置半透明背景色的相关文章

利用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

spring cloud zuul filter 设置过滤请求

利用spring cloud zuul 设置spring boot 中的filter ,出现了跨域问题,然后根据设置response可解决跨域,同时完成过滤请求 ********************************************************************************************************************* //主要执行的类public class PreRequestLogFilter extends Zu

EBS Form 高亮当前行/设置行背景色

1.高亮当前行 设置 Block 的 Current Record Visual Attribute Group 属性为:SELECTED_DATA 说明:SELECTED_DATA是模板中已有的视觉属性,可以根据需求新建 Visual Attribute Group, 然后设置Block的属性即可. 2.设置行背景色 情景:设置某些行的背景色,或者对特殊数据加背景色等 EBS Form 高亮当前行/设置行背景色,布布扣,bubuko.com

android 设置半透明

对于Button和ImageButton 还有一些View 设置半透明或者透明都是通过 android:background="#b0000000" 这是就是半透明 android:background="#00000000" 就是全透明 android:background="#FFFFFFFF" 就是不透明 介于中间的可以来自己设置透明度

eclipse 字体颜色设置和背景色设置

eclipse 字体颜色设置和背景色设置 本例使用的背景色是喜大普奔的豆沙绿,比较柔和 设置为:色调:85.饱和度:120.亮度:208 即可,据说长时间使用可以缓解眼疲劳哦. (吐槽:开什么玩笑,远离编程才能缓解眼疲劳好吗) 为了配合豆沙绿的背景色,下面的配色方案是我自己设置出来的,喜欢DIY的朋友也可以在此基础上进行修改:(这里的数值都是数值 红绿蓝-RGB设置) 1.注释 Annotations : 107 147 186 浅蓝色 2.符号 Brackets : 255 128 0 橙色

[Flex] 组件Tree系列 —— 利用firstVisibleItem属性,设置或取得第一个显示节点

mxml: 1 <?xml version="1.0" encoding="utf-8"?> 2 <!--功能描述: 利用firstVisibleItem属性,设置或取得第一个显示节点 --> 3 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 4 xmlns:s="library://ns.adobe.com/flex/spark"

Java 为 Excel 中的行设置交替背景色

在制作Excel表格时,通过将数据表中上下相邻的两行用不同的背景色填充,可以使各行的数据看起来更清楚,避免看错行,同时也能增加Excel表格的美观度.本文将介绍如何在Java程序中为 Excel 奇数行和偶数行设置交替背景色. 使用工具:Free Spire.XLS for Java (免费版) Jar文件导入方法 方法一: 下载最新的Free Spire.XLS for Java包并解压缩,然后从lib文件夹下,将Spire.Xls.jar包导入到你的Java应用程序中.(导入成功后如下图所示

使用RGBa和Filter实现不影响子元素的CSS透明背景

点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所有的浏览器,我们要对付opacity讨厌的语法:二是opacity不仅使目标元素的背 景变得半透明,而且使它所有的子元素的背景也变成了半透明.这意味着它里面所有的文本(译者注:图片也一样)都具有同样的透明度,我敢肯定没几个人想要这 样的效果.可以通过添加一些不必要的元素,使用CSS定位技巧类似的手段

html通过css来设置半透明背景

Html/Css标签透明度效果的实现,在html中,实现半透明背景,在HTML Div+Css编程中,为了实现版透明,通常有3中做法. 第一种是HTML5的透明,在H5中支持透明背景颜色,但遗憾的是,H5中的办透明背景颜色只支持 rgba的洗发,不支持16进制的写法 如: background-color:rgba(0,152,50,0.7);// -->70%的不透明度 background-color:transparent;支持完全透明 在传统浏览器中,IE浏览器的独特性也是某些透明度设置