`
agevs
  • 浏览: 70298 次
  • 来自: 北京
博客专栏
924aba1e-229a-352e-b6d4-f15f3159a438
各种Web前端技巧经验分享...
浏览量:0
文章分类
社区版块
存档分类
最新评论

CSS设置div元素的透明度

阅读更多

在IE中需要通过"filter"来定义透明度"opacity",而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持,需要把两种设定都加进去。

.div {
     filter:alpha(opacity=50);/*IE*/
     opacity:0.5;/*Mozilla*/
}

 

 

用下面的样式表定义你的div可以有各种过度效果。.alpha是div的class.精心开发5年的UI前端框架!

 
.alpha { filter: alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100}
解释:
Opacity=开始的不透明度(100的话就不透明了) 
FinishOpacity=结束的不透明度(100的话就不透明了) 
Style=样式,从0开始,1.2.3....有均匀透明啊,放射形状透明啊... 
StartX=开始透明的X坐标,基本上为图片、层的左上角(0) 
StartY= 开始透明的Y坐标,基本上也为图片、层的左上角(0) 
FinishX=结束透明的X坐标,基本上也图片、层的右下(图片、层的宽度) 
FinishY=结束透明的Y坐标,基本上也为图片、层的右下角(图片、层的高度)

0
0
分享到:
评论

相关推荐

    精通css+div

    这一章将介绍这些新特性,如伪类和伪元素、媒体查询、阴影、渐变、透明度等。同时,也会讨论性能优化策略,比如减少重绘和回流、合理使用CSS预处理器以及如何组织和维护大型CSS项目。 通过以上四章的学习,读者将...

    div+css设置div的背景为半透明的方法

    例如,在CSS中设置filter:alpha(Opacity=80),这表示将元素设置为80%的透明度,即20%的不透明度。需要注意的是,filter属性只被IE浏览器支持,而诸如Firefox、Chrome等其他主流浏览器是不识别这一属性的。 对于Fire...

    网页特效 | 纯CSS控制DIV背景透明效果

    ie滤镜参数#3363370b,前两位为16进制透明度, 比如说值是上面用到的0.2,那么就是0.2×255=51,再转换成16进制为33 至于10进制转换16进制,请查阅js函数toString(16) 小韩网页设计为您提供的免费网页特效

    css + div 滑动弹出div效果

    例如,当一个div从隐藏变为显示时,可以通过添加或改变其高度、宽度、透明度等属性来实现滑动效果。下面是一个简单的例子: ```css #myDiv { width: 0; height: 0; opacity: 0; transition: all 0.5s ease; /* ...

    div背景半透明,覆盖整个可视区域的遮罩层效果

    1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的...

    div+css手册

    7. **透明度和支持透明PNG**:CSS2.0开始支持透明度,允许元素部分可见,这对网页设计的创新产生了重要影响。 通过《div+css手册》和提供的CSS2.0.chm文件,读者可以系统学习这些核心概念,并通过实例实践提升自己...

    纯CSS3实现DIV高亮显示特效

    例如,可以创建一个`div`,并应用`:hover`伪类,设置过渡效果来改变背景颜色、边框宽度和透明度。同时,还可以使用`animation`属性实现更复杂的动画效果。 下面是一个简单的示例代码,展示了如何用CSS3实现一个简单...

    css3半透明遮罩背景lightbox图片展示特效

    例如,我们可以为一个div元素定义一个背景颜色,并设置其透明度: ```css .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 这里的最后一个...

    CSS实现半透明div层的方法.rar

    CSS3引入了`opacity`属性,它可以设置元素的不透明度。值范围是从0到1,0表示完全透明,1表示完全不透明。例如,如果我们希望一个div层有50%的透明度,我们可以这样设置: ```css div { opacity: 0.5; } ``` 然而...

    CSS和Javascript实现的DIV半透明飘浮层

    用CSS和Javascript实现的DIV遮照飘浮层 通过点击按钮显示半透明遮盖层以及信息层 用CSS实现的固定飘浮,以及用Javascript实现的定位飘浮 用VS2008打开后直接运行UserShowPanelTest.aspx的效果是CSS实现的效果,要实现...

    js+CSS实现弹出居中背景半透明div层的方法.docx

    JS+CSS 实现弹出居中背景半透明 div 层的方法 在 Web 开发中,弹出居中背景半透明 div 层是一种常见的交互效果,通过 JavaScript 和 CSS,我们可以轻松实现这种效果。在本文中,我们将详细介绍如何使用 JS+CSS 实现...

    黑色css+div实用模板

    通过CSS,可以调整这些图片的显示方式,如大小、位置、透明度等。 7. HTML(超文本标记语言):HTML是网页的基础,定义了网页的结构和内容。与CSS结合使用,HTML负责页面的内容,而CSS负责页面的外观和布局。 总的...

    div 背景透明度 如何设置一个div的背景透明度

    在CSS(层叠样式表)中设置元素的透明度是一项基本而重要的技术,尤其是在设计网页时需要对元素进行视觉上的融合或者淡入淡出效果。在传统的CSS 2时代,我们使用filter属性中的alpha滤镜来设置div背景的透明度。这种...

    div css导航菜单用CSS样式表处理斜角导航条

    此外,还可以通过调整边框的透明度(border-color的alpha值)实现渐变斜角。 ```css .navbar { border-top: 5px solid #f00; border-bottom: 5px solid transparent; } ``` 为了进一步完善斜角效果,可以使用伪...

    CSS精通CSS+DIV网页样式与布局

    `<div>`元素是一个通用的容器,可以容纳其他HTML元素,通过CSS可以对这些元素进行定位、设置尺寸、颜色、字体等样式属性,实现复杂的页面设计。 **描述解析:**描述提到“精通CSS+DIV网页样式与布局”,强调的是对...

    《精通CSS+DIV网页样式与布局》书中实例

    7. **CSS3新特性**:学习渐变、阴影、圆角、透明度等新特性,以及如何利用CSS3动画和过渡效果增强用户体验。 8. **性能优化**:学习减少CSS文件大小、利用CSS Sprites、避免使用行内样式和!important等方法,以提升...

    Div+CSS层完美实现拖拽特效

    这通常包括设置边框、背景色、透明度等属性,以及通过`position: absolute`或`position: fixed`来让该层脱离文档流,以便我们可以自由移动它。 接着,我们需要添加JavaScript代码来实现拖拽功能。拖拽过程可以分为...

    DIV背景透明样式使用

    在上面的代码中,我们使用了 CSS 的 filter 属性来设置 DIV 元素的背景透明度。filter 属性可以用于设置元素的透明度、灰度、反射、模糊、阴影等效果。在这里,我们将 opacity 属性设置为 1.0,以便 DIV 元素的背景...

Global site tag (gtag.js) - Google Analytics