RGBA与半透明背景

概念

所谓RGBA颜色,就是RGB三原色加ALPHA。在给背景添加颜色的同时,提供透明度特性。

使用方法

background:rgba(90,90, 54, 0.5);

支持情况


Firefox 3.0.5


支持


Safari


支持


Google Chrome


支持


IE


Fuck!!!!

IE怎么办

在做弹出层遮罩的时候,我们经常用到filter:alpha(opacity=50),这个就是解决方案吗?试试看吧。当你发现文本全部继承了半透明属性。

不得不说,IE在滤镜上还是花了很多功夫的。我们可以使用filter:progid:DXImageTransform.Microsoft.Gradient ,对,这个是渐变滤镜,但是可以实现背景透明这个滤镜有两个选项,一个是startColorStr,另外一个就是end。关于选项的值,跟RGBA很类似的,只不过从10进制改成了16进制,并且ALPHA放到了前面,

startColorStr = #00ffeedd , 00就是透明度,剩下的就是16进制的RGB颜色。

实例:

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#77000000,endcolorstr=#77000000);

时间: 2024-07-31 07:38:43

RGBA与半透明背景的相关文章

鼠标悬浮显示文字半透明背景

鼠标悬浮显示文字半透明背景 鼠标悬浮头像,出现文字"上传头像",之前都是使用< a title="上传头像"></a>这样的title来实现现在设计稿,是在头像上面,显示的大号字体的文字,且有一层黑色遮罩层第一想法是,多写一个层,悬浮时候,出现即可多想一步,使用css的content:"",来实现content后面的是双引号针对半透明黑色背景层background:#000opacity:0.5这是透明了全部(背景色和文字

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浏览器的独特性也是某些透明度设置

div半透明背景,文字不透明

1 background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ 2 3 background: #fff; 4 5 filter: alpha(opacity=60); 在需要不透明文字的元素样式上添加样式:position:relative; div半透明背景,文字不透明

Android之Dialog半透明背景消失

近日,遇到一个Dialog半透明背景消失的问题,背景需求是自定义Dialog实现警告提示框: // 初始化警告弹出框 alertDialog = new EmpAlertView(context, Utils.getIdByName(context, "style", "alert_style")); alertDialog.setCanceledOnTouchOutside(false); LayoutInflater inflater = (LayoutInfl

设置导航栏半透明背景

1 // 设置导航栏半透明背景 2 UINavigationBar *navBar = self.navigationBar; 3 if ([navBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)]) { 4 [navBar setBackgroundImage:[UIImage imageNamed:@"navigation_backguound.png"] forBarMetrics:UIBarM

jQuery给页面弹出层添加半透明背景

1.弹出层的设计 使用的东西是很简单的,需要两个div,一个做为弹出层背景的,另一个做为在半透明背景上面一层显示内容的. 在底层半透明div样式: 显示内容的div样式(不重要) jQuery的调用方式,在显示弹出框之前先把背景显示出来:

IE8下兼容rgba颜色的半透明背景

在工作中做一个图片半透明遮罩时发现在IE8下不兼容 一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了. 先说说rgba的含义: r代表red,g代表green,b代表blue,a代表透明度.红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成.比如rgba(0,0,0,.5)就是透明度为0.5的黑色.现代浏览器是支持rgba的,但是在IE8等古董级浏览器中是不支持rgba的,IE8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色). 网上的解决方法是: backg

css 半透明背景

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="

rgba兼容性处理(背景透明文字不透)

.parent { width: 400px; height: 400px; margin: 100px; font-size: 20px; color: #FF0000; border: 1px solid red; background: rgba(0, 0, 0, 0.5); /*下一句关键设置*/ filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000, endcolorstr=#7f00000