CSS3透明
“opacity”声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。
浏览器兼容性
opacity是浏览器支持最好的一个CSS3元素…当然,除了IE!
CSS3透明(例1:层)
上面的透明例子使用了下面的样式:
1
2
3
4
5
|
div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }
|
浏览器支持:
- Firefox 3.05+
- Google Chrome 1.0+
- Internet Explorer 8-
- Opera 9.6+
- Safari 3.2.1+
CSS 3 透明(例2:图片)
我们也可以在图片上使用不同透明度的透明效果,就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上,实现一种链接的鼠标经过效果。
1
2
3
|
img.opacity1 { opacity:0.25; width:150px; height:100px; }
img.opacity2 { opacity:0.50; width:150px; height:100px; }
img.opacity3 { opacity:0.75; width:150px; height:100px; }
|
浏览器支持:
- Firefox 3.05+
- Google Chrome 1.0.154+
- Internet Explorer IE8-
- Opera 9.6+
- Safari 3.2.1+
分享到:
相关推荐
本资源"css3透明滑动菜单 css3透明滑动菜单网页特效.zip"聚焦于如何利用CSS3来创建具有动态透明度变化的滑动菜单,这种效果通常用于网站导航,能提升用户体验,使网页更加现代和交互性更强。 首先,CSS3中的`...
在本案例中,"css3透明滑动手风琴"是一个使用CSS3技术实现的动态交互效果,它使得网页元素能够以透明度变化和滑动动画的形式进行展开和收缩,为用户带来独特的视觉体验。 手风琴效果通常用于信息展示,特别是在有限...
【标题】"CSS3透明方块碎片登录框特效.zip"是一个包含使用CSS3技术实现的登录框特效资源,其中融入了动态的透明方块和碎片效果。这种特效为网页界面增添了一种现代感和视觉吸引力,使登录过程更加互动且引人注目。 ...
《精美紫色渐变背景CSS3透明登录框动画特效解析》 在现代网页设计中,吸引用户的注意力并提供良好的用户体验是至关重要的。本篇文章将详细解析标题为“精美紫色渐变背景css3透明登录框动画特效”的资源,它是一个...
这里我们关注的是“CSS3透明幻灯片切换”这一主题,它主要涉及利用这些技术实现一个具有透明效果和动态切换功能的幻灯片组件。接下来,我们将深入探讨相关知识点。 首先,CSS3是CSS(层叠样式表)的最新版本,引入...
"JS+CSS3透明的霜雾玻璃图片预览特效"是一个利用JavaScript和CSS3技术实现的高级功能,它允许用户在鼠标悬停或点击时,对图片进行预览,同时呈现出一种类似于霜雾玻璃的半透明效果,既美观又实用。这个压缩包文件...
在这个特定的场景中,我们关注的是“html5 css3透明时钟鼠标悬浮图片放大”这一主题,这涉及到HTML5的新特性、CSS3的动画与过渡效果以及响应式设计的一些技巧。 首先,HTML5中的`<canvas>`元素为我们提供了绘制图形...
在本项目中,CSS3可能被用来定义计算器的样式,如颜色、字体、边框、阴影以及透明度。特别是`opacity`属性用于实现透明玻璃效果,`box-shadow`用于添加深度感,`transform`和`transition`则可以实现按钮的点击效果和...
在本项目中,我们主要探讨的是使用JavaScript(js)和CSS3来实现一种透明渐变风格的导航菜单特效。这种特效能为网站的用户界面增添动态性和吸引力,提高用户体验。以下将详细介绍涉及的关键知识点。 首先,`jQuery`...
在本文中,我们将深入探讨如何实现“CSS3透明方块碎片登录框特效”。这个特效以紫色渐变为背景,为登录表单提供了一种创新而吸引人的界面设计。它结合了CSS3的最新特性,如渐变、阴影、边框半径和动画效果,来创建出...
**CSS3透明度指南** CSS3的透明度功能允许开发者创建具有不同程度透明度的元素,从而实现更加丰富和动态的视觉效果。透明度不仅适用于背景色,还可以应用于文本和图像,创造出诸如渐变、半透明效果等。在本文中,...
在“css3半透明遮罩背景lightbox图片展示特效”中,我们主要关注的是如何使用CSS3来创建具有半透明遮罩和动态效果的图片展示组件,通常被称为Lightbox。Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会...
【CSS3透明幻灯片切换特效】是一种网页设计技术,主要利用了CSS3的新特性来实现动态、平滑且富有视觉吸引力的幻灯片切换效果。这种特效在现代网页设计中非常常见,常用于网站的首页展示或者产品介绍区域,以吸引用户...
在CSS中,我们可以使用`opacity`属性来创建一个元素的半透明效果。`opacity`属性接受一个0到1之间的数值,其中0表示完全透明,1表示完全不透明。但是,当为整个元素设置`opacity`时,该元素及其所有子元素都会受到此...
在CSS3中,透明度(Opacity)是一个强大的特性,它允许我们控制元素及其所有子元素的总体透明程度。本教程将深入探讨这个话题,并通过实例帮助你理解和掌握如何使用CSS3透明度来创建引人入胜的网页效果。 首先,...