css透明效果代码结构,用CSS实现背景半透明效果的方法实现

如何用css实现背景半透明效果？做过活动页面的同学可能会遇到要做背景半透明的效果，我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现，我们有更简单的做法：

背景为红色(#FF0000)，透明度20%。

CSS代码：

.alpha1{

width:300px;

height:200px;

background-color:#FF0000;

filter: Alpha(Opacity=30);

}

.ap2{

position:relative;

}

这样基本就可以实现啦，也不用担心定位和自适应问题，最大的问题是仅IE支持。

如果兼容FF、OP怎么写呢？首先，上面这种定法是不行的啦，那就只能用两个层重叠的方法啦。

改下页面结构与CSS样式：

HTML代码：

背景为红色(#FF0000)，透明度20%。

CSS代码：

.alpha1,.alpha2{

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实现背景半透明效果的方法实现_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网(gaodaima.com)提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权

转载请注明原文链接：用CSS实现背景半透明效果的方法实现_css

css透明效果代码结构,用CSS实现背景半透明效果的方法实现_css相关推荐

vue代码上传服务器后背景图片404解决方法
vue代码上传服务器后背景图片404解决方法参考文章: (1)vue代码上传服务器后背景图片404解决方法 (2)https://www.cnblogs.com/Mrrabbit/p/7830944 ...
css海浪动画代码,CSS3实现的线条波浪动画效果
演示: http://demo.shanhubei.com/demo/waveAnimation/ 这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使 ...
【一朵花儿——效果+代码 Html+JavaScript+CSS】
目录效果代码说明效果代码 index.html <!DOCTYPE html> <html lang="en" >
CSS背景半透明效果
说到CSS的透明效果可以使用如下方式: 1. opacity属性设置:例如opacity:0.7,而低版本的IE浏览器不直接支持这个属性,但是可以使用滤镜filter:alpha(opacity:70 ...
Eeic Meyer on CSS 之背景半透明效果
CSS 并不支持任何形式上的半透明的效果. 书上介绍了两种方法来达到半透明的效果. 第一种是利用"半屏(halfscreen)",是由Todd Fahrner 提出的. 原理上就是 ...
html button半透明效果,【笔记JS/HTML/CSS】用div实现个性化button，背景半透明
html中的button默认样式..不太能看,如果调一调背景色和字体的话也挺适合简洁的页面设计于是决定配合JS,用html中的div完成button 最终结果图: html代码:(first_pas ...
手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书手指滑动书本翻页效果.显现手机端翻书效果,支持手拖动翻页代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
android桌面雪花效果代码,Android营造雪花和雨滴浪漫效果
本文在实现雪花效果的基础上,根据漫天飞舞雪花,实现下雨天场景的效果,使用eclipse android 版本,具体内容如下雪花效果图: 具体代码: 1.漫天飞舞的雪花主要代码 SnowView pa ...
css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...

css透明效果代码结构,用CSS实现背景半透明效果的方法实现_css

css透明效果代码结构,用CSS实现背景半透明效果的方法实现_css相关推荐

最新文章

热门文章