关于Div半透明子元素不透明的问题
来源:互联网 发布:远程会诊软件 编辑:程序博客网 时间:2024/06/05 20:13
今天做登录框的时候,想做成透明的看起来更美观,没想到设置透明度的时候,登陆框里面的输入框啊文本全都变透明啦~
好吧,我就在网上找了怎样使Div里面的子元素不透明的方法,并且考虑到兼容,特别记录一下,如下
如果要实现透明边框,子元素不透明,那么就要用这个组合: {filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f000000',endColorstr='#3f000000');
background-color:rgba(255, 255, 255, 0.3)}, 但要注意这两个属性中的颜色,透明度一定要一致,这个兼容性最高,效果也最好。
单一的使用一种样式是不能做出来各种浏览器都兼容的效果的,下面是四种透明样式的具体使用特点:
filter: alpha(opacity=50)——
1.会使子元素透明。
2.只针对针对所有IE浏览器及以Trident内核的诸如360浏览器,世界之窗浏览器等非IE浏览器有效。
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f000000',endColorstr='#3f000000')——
1.不会使子元素透明。
2.只针对针对所有IE浏览器及以Trident内核的诸如360浏览器,世界之窗浏览器等非IE浏览器有效。
opacity: 0.5——
1.会使子元素透明。
2.IE8以下版本及Trident内核的非IE浏览器均不支持,IE9以上及其他诸如火狐,谷歌极速等主流浏览器均支持。
background-color:rgba(255, 255, 255, 0.3)——
1.不会使子元素透明。
2.IE8以下版本及Trident内核的非IE浏览器均不支持,IE9以上及其他诸如火狐,谷歌极速等主流浏览器均支持。
火狐浏览器支持,Webkit内核的诸如360极速浏览器,谷歌极速浏览器等都也支持。
使用技巧:
鉴于上面属性的兼容性,如果不考虑元素的子元素,可以使用这个组合:
{filter: alpha(opacity=50);background-color:rgba(255, 255, 255, 0.3) },
第一个属性支持所有IE内核的浏览器,第二个元素支持其他主流的以火狐,谷歌极速等浏览器。
如果要实现透明边框,子元素不透明,那么就要用这个组合:
{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f000000',endColorstr='#3f000000');
background-color:rgba(255, 255, 255, 0.3)}, 但要注意这两个属性中的颜色,透明度一定要一致,这个兼容性最高,效果也最好
0 0
- 关于Div半透明子元素不透明的问题
- CSS实现父元素半透明,子元素不透明
- div 滤镜 半透明,字体不透明。
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
- html和css实现透明div上的div不透明,也可说父div透明,子div不透明
- 关于C#窗体的半透明,控件不透明的解决方案
- 父视图半透明,子视图不透明
- 设置视图半透明而子控件不透明
- 父View半透明,子View不透明
- 父元素透明,子元素不透明的实现
- css父块级元素透明,子级元素不透明的方法
- 半透明: MFC实现父窗口不透明,子窗口半透明效果
- CSS3 opacity 属性设置 div 元素的不透明级别:
- CSS实现Div层背景半透明而内容不透明的效果
- 关于子DIV居中的问题
- 关于子元素居中的问题
- 关于层半透明的问题
- 背景半透明边框不透明的布局
- leetcode16~3Sum Closest
- Android recovery分析(一)---全量升级包的编译流程
- Nginx优化
- 人机界面设计
- libevent源码深度剖析二
- 关于Div半透明子元素不透明的问题
- 继上次总结了点html标签,现在再写一些
- 刽子手游戏
- C#调用C++编写的DLL函数, 以及各种类型的参数传递 (转载)
- Hadoop+HBase完全分布式安装
- RecyclerView 获取item,删除item的坑
- 开博客的第一天
- 约束理论(TOC)的生产计划与排程管理
- Nginx rewrite(重读)