opacity -- 不透明度
- 取值: <alphavalue> | inherit
- <alphavalue>: 透明度取值(取值范围[0.0,1.0])
- inherit: 继承
- 初始值: 1(不透明)
- 继承性: 是
- CSS3提出opacity属性
示例
div
{
opacity
:
0.5
;
}
目前较老的Firefox版本,我们需要使用-moz-前缀,而对于旧的Safari/Chrome版本,我们需要使用-webkit-前缀。而对于更老的还在使用KHTML内核而不是webkit内核的Safari版本来说,我们需要使用-khtml-。那么如果我们想支持每一个浏览器,我们的代码应该是这样的: opacity: 0.5; -moz-opacity: 0.5; -webkit-opacity: 0.5; -khtml-opacity: 0.5;
对于IE不支持使用了一个滤镜:filter:alpha(opacity=50);IE我们需要使用从0到100的整数,IE8提供了一个新的方法来处:-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
文章转载自:http://blog.sina.com.cn/s/blog_48e6792c01010eog.html;
分享到:
相关推荐
### CSS Opacity 实现图片半透明效果详解 #### 一、引言 在网页设计中,经常需要对图片进行各种视觉处理,以达到美观或强调的效果。其中,图片的半透明处理是一种常见的需求,它不仅可以增加页面的艺术感,还能帮助...
6. CSS opacity-实现图片半透明效果:`opacity`属性可以改变元素的透明度。例如,`opacity: 0.5;`会让元素变得半透明。注意,这会影响元素及其所有子元素的透明度,如果只想改变图片本身的透明度,可以使用`filter: ...
在“css3半透明遮罩背景lightbox图片展示特效”中,我们主要关注的是如何使用CSS3来创建具有半透明遮罩和动态效果的图片展示组件,通常被称为Lightbox。Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会...
例如,创建一个背景色为半透明的红色块: ```css .box { background-color: rgba(255, 0, 0, 0.5); } ``` 结合这两个特性,可以创建出具有透明圆角的元素,如用于卡片或者按钮的设计。在实际项目中,还需要考虑...
在本文中,我们将深入探讨如何使用CSS3实现一个精美的鼠标悬停图片半透明渐变颜色背景遮罩动画特效。这个特效在用户将鼠标指针悬停在图片上时,会在图片上方添加一层带有渐变颜色的遮罩,当鼠标移开时,遮罩会以平滑...
在CSS中,半透明效果主要通过调整元素的`opacity`属性来实现。`opacity`属性接受一个介于0到1之间的数值,其中0代表完全透明,1代表完全不透明。例如,如果我们想让一个元素变得50%透明,可以这样设置: ```css ....
总的来说,CSS中的半透明效果是通过`opacity`、`background-color`的RGBA值以及`filter`属性实现的。它们为网页设计提供了丰富的视觉表现手法,使得元素可以更好地融入页面,提升用户体验。在实践中,我们需要根据...
要实现半透明图片的显示,首先需要了解CSS中的透明度属性`opacity`。这个属性接受一个0到1之间的值,0表示完全透明,1表示完全不透明。例如,如果我们有一个图片元素`<img id="myImg" src="image.png">`,我们可以用...
在CSS3中,实现图片放大并半透明以及与之相关的文字显示效果,主要涉及几个关键的CSS属性和技术。下面将详细讲解如何通过CSS3来实现这个功能。 首先,我们需要一个HTML结构来承载图片和文字。一个简单的示例可能是...
我们使用 CSS 将背景半透明层的宽度和高度设置为 100%,并使用 filter 属性或 opacity 属性来实现背景半透明效果。 在 JavaScript 中,我们定义了两个函数,pupopen() 和 pupclose(),用于控制背景半透明层和弹出...
在JavaScript编程领域中,"半透明的表格"是一种常见的网页美化技术,它通过CSS样式和JavaScript脚本实现,使得表格部分或全部具有透明效果。这种效果可以增加网页的视觉吸引力,同时不影响表格数据的可读性。下面...
在本案例中,我们关注的是一个名为"css3半透明遮罩lightbox效果.zip"的压缩包文件,它包含了利用CSS3实现的Lightbox特效。Lightbox是一种流行的网页图像查看技术,当用户点击缩略图时,大图会在半透明的背景层上弹出...
首先,我们要实现图片的半透明效果。在HTML中,我们可以通过CSS来控制元素的透明度。`opacity`属性可以设置元素的整体不透明度,取值范围为0(完全透明)到1(完全不透明)。例如,我们可以为一个图片元素设置初始...
其中,CSS透明度设置是一项非常实用的功能,它允许开发者调整页面元素的不透明度,从而实现半透明或其他视觉效果。本文将深入探讨CSS透明度的概念、不同浏览器下的兼容性问题以及如何通过多种方式来设置透明度。 ##...
在这个特定的问题中,我们关注的是如何通过CSS实现鼠标悬停时图片效果的变化,比如图片变灰、变色以及半透明。下面将详细介绍这些效果的实现方法。 1. 图片变灰: 当鼠标悬停在图片上时,可以使用CSS的`filter`...
### CSS及JavaScript实现半透明效果 #### 一、引言 在Web开发中,实现元素的半透明效果是一项常见的需求,它可以为用户界面增添视觉层次感,并有助于提高用户体验。通过CSS(层叠样式表)与JavaScript相结合的方式...
在本主题中,“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果,即当用户交互时,网页背景颜色逐渐变为透明,并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性,常被...
这将使表单内的所有输入框变得半透明。然而,这种全局透明可能会导致文本和其他元素难以阅读。为了保持可读性,我们可以只改变背景的透明度,而保持文本和边框的清晰。这就需要用到`background-color`和`rgba()`函数...
CSS3是实现这种效果的强大工具,可以提供平滑的动画和半透明遮罩效果,增强用户体验。本资源包含一个使用CSS3实现的半透明遮罩Lightbox效果的源码。 首先,我们来理解Lightbox的基本结构。通常,Lightbox由以下几个...
在HTML和CSS中,我们可以使用`opacity`属性或者`rgba()`函数来设置元素的透明度,以此达到半透明效果。例如: ```css .pop-up { background-color: rgba(255, 255, 255, 0.8); /* 白色背景,80%的不透明度 */ ...