半透明背景(兼容IE)

在CSS3中有rgba属性,可以很方便的实现背景透明,但对于IE家族来说却不是那么容易实现: FireFox.chrome.opera.safari 凡是对支持CSS3且支持W3标准的浏览器都可以现实的,比如safari,chrome的webkit核心的浏览器.firefox的Gecko内核.opera的Presto内核(最近传说转向webkit内核): 格式:background:rgba(255, 0, 0, 0.5); background:rgba([red:0~255], [green…

真~让IE8支持background: rbga; ，IE8下兼容rgba颜色的半透明背景

IE8下兼容rgba颜色的半透明背景这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们的如下: background: rgba(0,0,0,.5); /*支持rgba的浏览器*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); IE f…

兼容ie的半透明背景颜色过滤器,会影响事件的触发.

兼容ie的半透明背景颜色过滤器,会影响事件的触发.…

Framework 7 之给Picker Modal 添加半透明背景

官网的效果图如下: 效果图如下: 我们需要在显示下面浮层的时候显示后面的半透明背景,Framework 7 里面默认有个半透明背景,如下图: 解决方案: 1.在</body>标签之前添加<div class="modal-overlay"></div> : 2.modal-overlay的z-index值为13000,.picker-modal的z-index值为12500,所以如果要让picker-modal显示在半透明背景之上,需要把picker…

如何使用纯js实现一个带有灰色半透明背景的弹出框

原文如何使用纯js实现一个带有灰色半透明背景的弹出框 // 加入透明背景 var body = document.body;var backgroundDiv = document.createElement("div"); backgroundDiv.style.cssText = "left:0;top:0;position:fixed;background:#ddd;opacity:0.8;width:100%;height:100%"; body.appen…

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透明背景兼容方案

css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样子写的. .transparent_class { /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good brow…

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在滤镜上还是花了非常多功…

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

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

html--图片背景兼容，兼容IE6

在IE6中对图片格式png24支持度不高, 如果使用的图片格式是png24,则会导致透明效果无法正常显示解决方法: 1.可以使用png8来代替png24,即可解决问题, 但是使用png8代替png24以后,图片的清晰图会有所下降 2.使用JavaScript来解决该问题,需要向页面中引入一个外部的JavaScript文件 <body style="background-color: #bfa;"> <!-- 在IE6中对图片格式png24支持度不高, 如果使用的图片…

ios-点击图片放大,背景变半透明

在view中点击一个图片,图片放大,背景变半透明,图片不会变透明的效果图如下思路:图片框是一个按钮,监听点击事件. 当点击图片后:改变图片的frame,使图片放大,并且在controller.view中添加一个半透明的view.并给view添加点击事件. 把头像放到半透明view的上面. 再次点击头像或者半透明区域时,将图片缩放会以前大小.将半透明view 从父容器移除即可. 易错示例: 错误:头像与背景都是半透明效果因为:错将头像图片放到了半透明的view上,头像图片会跟着半透明的view变…

css设置div等标签背景半透明

三种方式: 1. background-color: transparent; 直接设置背景为透明 2.这种是子元素也会跟着变成半透明 /* 背景半透明,1为不透明 */ opacity: 0.5; /* ALL */ -moz-opacity:0.5;/* FIREFOX */ filter:alpha(Opacity=50);/* IE */ 3. background: rgba(240,240,240, 0.5); /* 背景半透明,1为不透明 */…

iframe框架在IE浏览器，360兼容浏览器下将白色背景设为透明色

<IFRAME ID="Frame1" SRC="transparentBody.htm"></IFRAME> iframe在大部分浏览器中是没有背景的,但是IE中默认是有一个白色的背景色, 我测试的是(IE8/360兼容浏览器),当主背景色不是白色的时候,在这一部分会显得很突兀. 帮助手册中给出了解决方案,即将iframe中的allowTransparent属性设置为true,即可. <IFRAME ID="Frame1&q…

CSS属性定义文本修饰边框效果背景修饰

一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度值为0-1)rgba(123,123,123,0) hslhsla(h:色相,色环上(ppt78页)的角度值,0-360 s:饱和度,0-100% l:明度,0-100% a:不透明度,0-1之间的小数)color:hsla(30,100%,50%,0.8); 十六进制(一般格式为#ffffff)(字母范围从A-F,数字从0-9 ) opacity…

兼容ie8总结

最近做了个兼容ie8的项目,把遇到的一些坑总结一下,欢迎大神指正,共勉. 一. js相关 1. 关于库的引用 jquery只能引用1.x的版本,swiper只能引用2.x的版本. 2. 动态生成的dom, $().click 方法为其添加点击事件,需用on 或 live 方法进行绑定. 3. ie8不兼容forEach, 可用如下代码进行兼容 if ( !Array.prototype.forEach ) { Array.prototype.forEach = function forEach…

H5兼容问题及解决方法

Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度,为一个正整数,或字符串‘device-width’ // heig…

css背景色半透明的最佳实践

之前项目中遇到纯色的半透明背景,都是这么干: <style> .box {width:300px;height:300px;position:relative;} .mask {width:300px;height:300px;position:absolute;z-index:;background-color:#;opacity:);} .content {width:300px;height:300px;position:absolute;z-index:;} </style>…

CSS3新特性，兼容性，兼容方法总结

css3手册css3手册边框 border-radius 用于添加圆角效果语法: border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? <length>:用长度值设置对象的圆角半径长度.不允许负值 <percentage>:用百分比设置对象的圆角半径长度.不允许负值实例: border-radius:10px;…

实现div毛玻璃背景

毛玻璃效果 ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法 CSS3 Filter CSS3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项: 1.grayscale灰度 2.sepia褐色 3.saturate饱和度 4.hue-rotate色相旋转 5.invert反色 6.opacity透明度 7.brightness亮度 8.contrast对比度 9.blur模糊 10.drop-shadow阴影…

CSS利用filter/opacity实现背景透明

先看看众所周知的解决方案如果我们想要一个半透明背景,有两种实现方式: 1.利用CSS和opacity属性 .opacity { filter:alpha(opacity=);/*IE浏览器*/ opacity: 0.5;/*非IE浏览器*/ } 2.建立一个24位PNG背景图片第一种利用opacity的问题除了需要通过麻烦的语法来兼容所有浏览器, 还有不单该元素自身背景透明了,它的子元素会继承opacity属性,也会透明. 所以里面所有的文字也是透明的,这一般不是想要的效果. 你可以做一些…

iOS 设置视图半透明而子控件不透明

用一张半透明的图片做背景使用colorWithWhite:alpha:方法 white后面的参数表示灰度,从0-1之间表示从黑到白的变化,alpha就是你想调整的透明度 bgView.backgroundColor = [UIColor colorWithWhite:0.f alpha:0.5]; 3 在xib或者storyBoard里面对背景进行设置如图: 半透明背景xib设置.png 通过对背景颜色设置图中的Opacity滑块调整透明度,同样可以达到设置背景半透明而子控件不透明的目的.…

C#控件背景透明的几种解决方案

已经很少做winform程序了,最新参与了一个小项目,遇到了控件背景透明的功能要求,特在此总结一下,供有需要的同行参考. 0.背景透明的概念和分类背景透明是啥意思呢,就是背景透明.哈哈,废话了.其实你想过没有,要求不一样,实现的难道和技术手段也不一样. 最基本的就是不显示控件自己的背景,那,那显示谁的背景? 背景透明后,透过去显示谁,也就是说后面的谁不透明,这是问题的关键,换句话说,透明控件的parent是一个还是多个. 1.简单的背景透明,parent是一个的情况 a.自然透明,如图labe…

Android之使用参数改变ProgressDialog的位置、大小、背景透明度、屏幕透明度

废话不多说,这个改变ProgressDialog的一些配置属性和前面我讲的AlertDialog的设置参数方法一模一样,这里就为了更直观,直接贴实现代码吧: ProgressDialog mProgressDialog = new ProgressDialog(UserLogin.this,ProgressDialog.THEME_HOLO_DARK); mProgressDialog.setMessage("正在登录..."); mProgressDialog.setProgress…

RGBA颜色与兼容性的半透明背景色

所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色. 关于rgba的基础知识介绍,您可以参见这里:CSS3 RGBA colors使用参考指南我们平时用的较多的是16进制颜色,例如黑色#000000;白色#FFFFFF,这些是16进制表示的颜色,如果使用RGB颜色表示就是rgb(0, 0, 0)与rgb(255,255,255),…

CSS3实现背景透明，文字不透明

最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示: 看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init…

Dialog 样式主题标题背景使用【总结】

最重要的是这两行代码 dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);//设置Dialog没有标题,需在setContentView之前设置 dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);//设置Dialog背景透明效果 MainActivity public class MainActivity extends ListActi…