`
jsntghf
  • 浏览: 2542761 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS实现半透明效果

CSSIEFirefox浏览器Blog 
阅读更多

设计网页或者制作blog模板的时候，往往会用到让某部分实现透明或者半透明的效果，这时候我们该怎么办呢？

在IE中需要通过"filter"来定义透明度"opacity"。

 

而在Firefox中是可以直接解析"opacity"的，所以如果要使得这个效果在两种浏览器中都得到支持，需要把两种设定都加进去。

 

针对IE的设定：this.filters.alpha.opacity=50
而针对Firefox的设定：this.style.MozOpacity=0.5

 

大家可以直接用下面代码给图片定义，只须修改图片地址就能实现效果。其实不只是图片可以实现这个CSS滤镜，网页也是可以的！

 

<img alt="Sunset" src="Sunset.jpg" width="250" height="60" style="opacity: 0.5;filter:alpha(opacity=50);cursor:pointer;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;this.filters.alpha.opacity=50"></img>
分享到：
| 有创业及野心的人一定要看
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    这里的`rgba()`函数用于设置带有透明度的颜色，其中最后的参数代表透明度，0.5表示50%的透明度，黑色背景因此呈现出半透明效果。 二、Lightbox图片展示 在Lightbox效果中，图片通常会以某种动画效果显示。这里提到...

    css半透明效果

    本文将深入探讨如何在CSS中实现半透明效果。 首先，我们可以通过调整元素的`opacity`属性来实现半透明。`opacity`属性接受一个介于0和1之间的数值，其中0代表完全透明，1代表完全不透明。例如，设置一个元素的`...

    css实现半透明效果基本原理

    CSS半透明效果的实现是网页设计中常用的技术之一，它能够让页面的元素具有透明度，从而可以显示下面的内容或者背景，创造出丰富的视觉层次感。半透明效果主要可以通过CSS的几个属性来实现，其中最常用的是`opacity`...

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

    3. 使用 CSS 中的 opacity 属性或 filter 属性来实现背景半透明效果。 下面是实现弹出居中背景半透明 div 层的方法： 首先，创建一个 HTML 文件，并添加以下代码： ```html &lt;!DOCTYPE ...

    css3半透明遮罩lightbox效果.zip

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

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

    对于实现半透明效果，可以使用`filter: alpha(opacity=x)`，其中x是0到100的整数，代表不透明度。但是，`filter`属性在IE浏览器（尤其是旧版本）中支持较好，但在其他现代浏览器中，推荐使用`opacity`或`rgba()`。 ...

    HTML5+CSS3 制作的图片半透明遮罩效果

    本主题聚焦于使用HTML5和CSS3来实现图片的半透明遮罩效果，这是一种常见且实用的设计手法，常用于增加用户界面的层次感和引导用户的注意力。 首先，HTML5中的`&lt;img&gt;`标签用于插入图像，其基本语法是`替代文本"&gt;`。...

    CSS实现表单元素透明效果

    本文将详细讲解如何使用CSS实现表单元素的透明效果，以达到吸引用户注意力、提升网页视觉效果的目的。 首先，理解透明度的概念至关重要。在CSS中，透明度是指一个元素的可见度，它可以是完全不透明（即100%可见）到...

    CSS以及js半透明

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

    js+html5实现半透明遮罩层弹框效果

    知识点2：CSS样式实现半透明效果 CSS样式是实现半透明遮罩层的关键。通过使用rgba颜色值，可以控制背景颜色的半透明效果。其中rgba中的最后一个参数0.5代表透明度为50%，即半透明效果。示例CSS如下： ```css .tip { ...

    css实现下拉菜单透明资料

    最后，“CSS实现背景透明-半透明效果的方法_asp.mht”文件则可能涵盖了如何为下拉菜单背景实现透明或半透明效果。在CSS中，可以使用`rgba()`函数来设定颜色值，其中的最后一个参数代表透明度。例如，`background-...

    css 网站半透明素材分享 PSD 半透明图片素材 网页素材

    在这个特定的资源包中，主要涉及到的是半透明效果的应用，这对于创建具有视觉吸引力且现代感十足的网页至关重要。 半透明效果，也被称为Alpha透明或不透明度，允许元素背景或图像部分可见，创造出层次感和深度。在...

    css 背景半透明最佳实践

    这两种技术可以有效地实现半透明效果，同时避免了子元素继承的问题。 1. **使用`rgba`**：`rgba`色彩模型允许设置颜色的同时指定透明度（Alpha通道），这样可以仅针对当前元素应用透明效果而不影响其他元素。例如：...

    css 半透明全屏蒙层 全屏屏蔽 内容绝对居中

    接下来，我们用CSS来实现半透明全屏蒙层。我们可以使用`position: fixed`将蒙层设置为固定定位，覆盖整个屏幕。通过设置`z-index`确保蒙层位于所有元素之上，然后用`background-color`和`opacity`创建半透明效果： ...

    网页半透明效果实用的html

    本资源“网页半透明效果实用的html”包含两个关键文件：“动态图片轮滑效果.txt”和“网页半透明.txt”，它们将帮助我们了解如何在HTML中实现这两种效果。 首先，让我们来探讨网页半透明效果。在HTML中，我们通常...

    css3实现图片放大并半透明

    /* 使用rgba颜色，实现半透明效果 */ display: flex; justify-content: center; /* 居中显示文字 */ align-items: center; /* 垂直居中 */ opacity: 0; /* 默认隐藏覆盖层 */ transition: opacity 0.3s; /* ...

    分享CSS中半透明样式的处理方法.docx

    CSS 中半透明样式的处理方法是指在网页设计中使用 CSS 语言来实现元素的半透明效果的各种方法。本文将介绍三种常见的半透明样式的处理方法。 一、元素容器透亮 在 CSS 中，元素容器透亮可以通过使用 opacity 属性...

Magicbox
Global site tag (gtag.js) - Google Analytics