`
longxia1987
  • 浏览: 34944 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS opacity - 实现图片半透明效果

 
阅读更多
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 - 实现图片半透明效果的代码

    ### CSS Opacity 实现图片半透明效果详解 #### 一、引言 在网页设计中,经常需要对图片进行各种视觉处理,以达到美观或强调的效果。其中,图片的半透明处理是一种常见的需求,它不仅可以增加页面的艺术感,还能帮助...

    html css技巧

    6. CSS opacity-实现图片半透明效果:`opacity`属性可以改变元素的透明度。例如,`opacity: 0.5;`会让元素变得半透明。注意,这会影响元素及其所有子元素的透明度,如果只想改变图片本身的透明度,可以使用`filter: ...

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

    在“css3半透明遮罩背景lightbox图片展示特效”中,我们主要关注的是如何使用CSS3来创建具有半透明遮罩和动态效果的图片展示组件,通常被称为Lightbox。Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会...

    CSS应用---透明圆角

    例如,创建一个背景色为半透明的红色块: ```css .box { background-color: rgba(255, 0, 0, 0.5); } ``` 结合这两个特性,可以创建出具有透明圆角的元素,如用于卡片或者按钮的设计。在实际项目中,还需要考虑...

    CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效

    在本文中,我们将深入探讨如何使用CSS3实现一个精美的鼠标悬停图片半透明渐变颜色背景遮罩动画特效。这个特效在用户将鼠标指针悬停在图片上时,会在图片上方添加一层带有渐变颜色的遮罩,当鼠标移开时,遮罩会以平滑...

    CSS实现半透明效果

    在CSS中,半透明效果主要通过调整元素的`opacity`属性来实现。`opacity`属性接受一个介于0到1之间的数值,其中0代表完全透明,1代表完全不透明。例如,如果我们想让一个元素变得50%透明,可以这样设置: ```css ....

    css半透明效果

    总的来说,CSS中的半透明效果是通过`opacity`、`background-color`的RGBA值以及`filter`属性实现的。它们为网页设计提供了丰富的视觉表现手法,使得元素可以更好地融入页面,提升用户体验。在实践中,我们需要根据...

    javascript经典特效---半透明图片的显示.rar

    要实现半透明图片的显示,首先需要了解CSS中的透明度属性`opacity`。这个属性接受一个0到1之间的值,0表示完全透明,1表示完全不透明。例如,如果我们有一个图片元素`&lt;img id="myImg" src="image.png"&gt;`,我们可以用...

    css3实现图片放大并半透明

    在CSS3中,实现图片放大并半透明以及与之相关的文字显示效果,主要涉及几个关键的CSS属性和技术。下面将详细讲解如何通过CSS3来实现这个功能。 首先,我们需要一个HTML结构来承载图片和文字。一个简单的示例可能是...

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

    我们使用 CSS 将背景半透明层的宽度和高度设置为 100%,并使用 filter 属性或 opacity 属性来实现背景半透明效果。 在 JavaScript 中,我们定义了两个函数,pupopen() 和 pupclose(),用于控制背景半透明层和弹出...

    javascript经典特效---半透明的表格.rar

    在JavaScript编程领域中,"半透明的表格"是一种常见的网页美化技术,它通过CSS样式和JavaScript脚本实现,使得表格部分或全部具有透明效果。这种效果可以增加网页的视觉吸引力,同时不影响表格数据的可读性。下面...

    css3半透明遮罩lightbox效果.zip

    在本案例中,我们关注的是一个名为"css3半透明遮罩lightbox效果.zip"的压缩包文件,它包含了利用CSS3实现的Lightbox特效。Lightbox是一种流行的网页图像查看技术,当用户点击缩略图时,大图会在半透明的背景层上弹出...

    鼠标经过图片半透明效果文字滑动显示

    首先,我们要实现图片的半透明效果。在HTML中,我们可以通过CSS来控制元素的透明度。`opacity`属性可以设置元素的整体不透明度,取值范围为0(完全透明)到1(完全不透明)。例如,我们可以为一个图片元素设置初始...

    CSS透明度定义

    其中,CSS透明度设置是一项非常实用的功能,它允许开发者调整页面元素的不透明度,从而实现半透明或其他视觉效果。本文将深入探讨CSS透明度的概念、不同浏览器下的兼容性问题以及如何通过多种方式来设置透明度。 ##...

    CSS鼠标悬停图片上图片变灰 变色 半透明

    在这个特定的问题中,我们关注的是如何通过CSS实现鼠标悬停时图片效果的变化,比如图片变灰、变色以及半透明。下面将详细介绍这些效果的实现方法。 1. 图片变灰: 当鼠标悬停在图片上时,可以使用CSS的`filter`...

    CSS以及js半透明

    ### CSS及JavaScript实现半透明效果 #### 一、引言 在Web开发中,实现元素的半透明效果是一项常见的需求,它可以为用户界面增添视觉层次感,并有助于提高用户体验。通过CSS(层叠样式表)与JavaScript相结合的方式...

    css背景颜色透明背景图片切换效果

    在本主题中,“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果,即当用户交互时,网页背景颜色逐渐变为透明,并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性,常被...

    CSS实现表单元素透明效果

    这将使表单内的所有输入框变得半透明。然而,这种全局透明可能会导致文本和其他元素难以阅读。为了保持可读性,我们可以只改变背景的透明度,而保持文本和边框的清晰。这就需要用到`background-color`和`rgba()`函数...

    css3实现的半透明遮罩lightbox效果源码.zip

    CSS3是实现这种效果的强大工具,可以提供平滑的动画和半透明遮罩效果,增强用户体验。本资源包含一个使用CSS3实现的半透明遮罩Lightbox效果的源码。 首先,我们来理解Lightbox的基本结构。通常,Lightbox由以下几个...

    一个半透明效果的弹出框

    在HTML和CSS中,我们可以使用`opacity`属性或者`rgba()`函数来设置元素的透明度,以此达到半透明效果。例如: ```css .pop-up { background-color: rgba(255, 255, 255, 0.8); /* 白色背景,80%的不透明度 */ ...

Global site tag (gtag.js) - Google Analytics