CSS实现背景透明/半透明效果的方法
半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
其他的还有不少文章,有个不错,如何用CSS实现背景半透明效果?
内容详细如下:
http://llf535.cn 龙行天下 精彩内容等着你
HTML代码:
<div class="ap2">
<p>背景为红色(#FF0000),透明度20%。</p>
</div>
</div>
CSS代码:
width:300px;
height:200px;
background-color:#FF0000;
filter: Alpha(Opacity=30);
}
.ap2{
position:relative;
}
这样基本就可以实现啦,也不用担心定位和自适应问题,最大的问题是仅IE支持。
如果兼容FF、OP怎么写呢?首先,上面这种定法是不行的啦,那就只能用两个层重叠的方法啦。
改下页面结构与CSS样式:
HTML代码:
<div class="ap2">
<p>背景为红色(#FF0000),透明度20%。</p>
</div>
<!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
</div>
CSS代码:
width:100%;
height:auto;
min-height:250px;/* 必需 */
_height:250px;/* 必需 */
overflow:hidden;
background-color:#FF0000;/* 背景色 */
}
.alpha1{
filter:alpha(opacity=20); /* IE 透明度20% */
}
.alpha2{
background-color:#FFFFFF;
-moz-opacity:0.8; /* Moz + FF 透明度20%*/
opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/
}
.ap2{
position:absolute;
}
CSS实现背景透明/半透明效果的方法的更多相关文章
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
- Activity透明/半透明效果的设置transparent(两种实现方法)
两种方法实现Activity透明/半透明效果的设置,代码思路很有调理,感兴趣的朋友可以参考下,希望本文可以帮助到你 方法一:res/values文件夹下建立styles.xml: 复制代码代码如下 ...
- CSS实现背景透明,文字不透明(各浏览器兼容)
/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...
- CSS实现背景透明,文字不透明(各浏览器兼容) (转)
/*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...
- 设置div背景透明的两种方法
实现div背景透明的两种方法 1.使用opacity属性 background-color:#000; opacity: 0.5; 这样做可以设置div内部所以区域的透明度,但是也会影响里面的文字,效 ...
- CSS实现背景透明而背景上的文字不透明完美解决
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
- 使IE6下PNG背景透明的七种方法任你选
原文地址:http://blog.csdn.net/mosliang/article/details/6760028 相信如何解决png在ie6下透明的问题困扰了很多人.为了追求更好的页面效果,很多人 ...
- 解决css设置背景透明,文字不透明
设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标 ...
- CSS实现背景透明而背景上的文字不透明
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
随机推荐
- android studio如何查看数据库文件
android studio查看数据库文件有两种方式: 1.SQLSCOUT 优点:集成在as中,功能强大. 缺点:收费,破解麻烦. 2.Android Device Monitor 中的File E ...
- C/C++ char和int的区别
字符字面值一般是用一对单引号来表示.char类型一般就是用字符字面值来初始化.赋值.由于char类型的是单字节长度,当给char类型的变量用字符字面值赋值时,当单引号里面的内容超过一个字节时,系统会自 ...
- Kafka笔记--常用指令(删除topic)
删除topic 首先需要设置server.properties,最后一行添加 delete.topic.enable=true 然后运行> ./kafka-topics.sh --zookeep ...
- Java学习笔记--HashMap中使用object做key的问题【转】
在HashMap中,如果需要使用多个属性组合作为key,可以将这几个属性组合成一个对象作为key.但是存在的问题是,要做get时,往往没办法保存当初put操作时的key object的referenc ...
- 树莓派设置固定ip
2016发布的rasbian采用的网络机制是dhcpcd: 不能使用以前的修改配置文件/etc/network/interfaces: 新的配置方式保持/etc/network/interfaces不 ...
- iOS开发 masonry 设置tableHeadView
最近做公司项目,使用到到tableHeadView,一直习惯用masonry来设置约束,但是设置tableHeadView没有那么的简单.先看下效果图: 视图层次结构是这样的: 基础的创建工程项目之类 ...
- 树上莫队 wowow
构建:像线性的莫队那样,依旧是按sqrt(n)为一块分块. int dfs(int x){ ; dfn[x]=++ind; ;i<=;i++) if (bin[i]<=deep[x]) f ...
- puppet foreman
服务器(物理机器和虚拟机)多了以后需要工具来管理,经常登陆系统后不知是在虚拟机上还是在物理机上?如果在虚拟机上这个虚拟机运行在哪个服务器节 点(host)上?如果在物理机上运行在什么配置的物理机上?运 ...
- Ubuntu 无线连接能上网,但是有线连接不能上
这两天装Ubuntu,遇到小问题.最头疼的还是上网,过去我装了Ubuntu时,都是插上网线就能直接上网,这次就不行了. 我刚点开一个网页,接下来点就不能上了,但是无线连接就可以正常上网. 我在一个论坛 ...
- 一个js编写全选、弹出对话框、ajax-json的案例
js功能有:全选.弹出对话框.使用json传输ajax数据:不想在写多余的文字了,直接上代码: <%@ page language="java" contentType=&q ...