`
wangshaofei
  • 浏览: 281673 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

css设置透明层

    博客分类:
  • css
css 
阅读更多

这种半透明的形式在blog上应用比较广泛,那么这种效果是怎么做出来的呢?用JS,NO,NO,既然我们是CSS布局教程,那么就尽量用CSS来解决问题!

filter: alpha(opacity=70); 
opacity: 0.7;

把这两句代码加入到要实现半透明层的CSS样式表里即可,简单吧!!
注:70和0.7的值可改为你需要的

分享到:
评论

相关推荐

    html+css透明背景

    但是,当为整个元素设置`opacity`时,该元素及其所有子元素都会受到此透明度的影响,包括内容。例如: ```css .box { background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ opacity: 0.5; /* 全元素半...

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

    Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会在当前页面上弹出一个全屏或半屏的图片视图,同时提供一个半透明的遮罩层,以增强用户体验。 一、CSS3半透明遮罩 半透明遮罩可以通过设置`opacity`属性...

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

    我们可以使用`position: fixed`将蒙层设置为固定定位,覆盖整个屏幕。通过设置`z-index`确保蒙层位于所有元素之上,然后用`background-color`和`opacity`创建半透明效果: ```css #mask { position: fixed; top: ...

    CSS透明度定义

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

    关于css设置层透明

    在实际应用中,常常需要对层设置透明效果的同时,控制其子元素的透明度。为了实现这一需求,可以在父层使用 `rgba` 或 `filter` 属性定义透明度,并通过 `position: relative;` 来为子元素创造相对定位的参照,这样...

    纯css实现内容下面的半透明层

    纯css手打,用before伪元素实现的一层半透明层,你可以看到下面的背景图,也可以看见上面内容,也就是他是在背景和内容之间的一层

    简洁透明网格css模板

    透明网格CSS模板的核心在于其透明度的应用,通过调整元素的`opacity`或使用`rgba()`颜色值,设计师可以创造出半透明的效果,使得背景图片或其他元素可以透过网格层隐约可见,增加层次感和深度。此外,这种透明效果还...

    CSS3几何透明层文本悬停特效.zip

    透明层通常是一个绝对定位的div,初始状态是透明或者部分透明,通过设置 `opacity` 或 `background-color` 的透明度来实现。当鼠标悬停在文本上时,这个透明层会改变其几何形状,例如变成一个圆形、方形或其他自定义...

    CSS实现半透明效果

    在本主题中,我们将深入探讨如何使用CSS实现半透明效果,这是一个常见的视觉设计技巧,可以使网页元素呈现出不同程度的透明度,从而增加界面的层次感和美感。 在CSS中,半透明效果主要通过调整元素的`opacity`属性...

    CSS3几何透明层文本悬停变色特效代码.zip

    【标题】"CSS3几何透明层文本悬停变色特效代码.zip" 提供了一种使用CSS3技术实现的创新效果,这种效果主要应用于文本元素,当鼠标悬停在文本上时,会产生几何形状的透明层,并伴随着颜色变化,从而增强用户体验和...

    网站首页悬浮半透明可关闭css+js引导层

    "网站首页悬浮半透明可关闭css+js引导层"是一个利用CSS(层叠样式表)和JavaScript技术实现的网页组件,它的主要特点是半透明效果、悬浮于首页上方以及用户可以自由关闭。下面将详细讲解这个组件的实现原理和关键...

    Css写透明文本框,无边界文本框

    在CSS(层叠样式表)的设计与开发过程中,创建一个既美观又实用的透明文本框且没有明显的边界的技巧是一项非常实用的技能。这不仅能够提升网页的整体视觉效果,还能增强用户体验。根据提供的标题、描述及部分代码...

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

    1. 使用 CSS 将 div 层设置为绝对定位,并将其宽度和高度设置为 100%。 2. 使用 JavaScript 控制 div 层的显示和隐藏。 3. 使用 CSS 中的 opacity 属性或 filter 属性来实现背景半透明效果。 下面是实现弹出居中...

    css3透明滑动菜单 css3透明滑动菜单网页特效.zip

    它允许设置元素的整体不透明度,取值范围为0(完全透明)到1(完全不透明)。例如,可以定义一个菜单项的初始不透明度为0.5: ```css .menu-item { opacity: 0.5; } ``` 其次,CSS3的`transition`属性可以实现...

    CSS实现表单元素透明效果

    CSS3引入了`opacity`属性,允许我们设置元素的整体透明度。例如,将一个表单元素的透明度设为0.5,代码如下: ```css form input { opacity: 0.5; } ``` 这将使表单内的所有输入框变得半透明。然而,这种全局透明...

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

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

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

    1. **伪元素**:我们可以利用`::before`或`::after`伪元素在图像上方添加一层半透明的颜色。例如: ```css .image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; ...

    css3半透明遮罩lightbox效果.zip

    1. **半透明遮罩(Overlay)**:这是一种覆盖整个页面的半透明层,用于突出显示弹出的图像。CSS3提供了`rgba()`函数,允许我们创建具有透明度的色彩,例如`rgba(0, 0, 0, 0.8)`创建了一个80%不透明的黑色遮罩。通过...

    灰色半透明CSS商务模板

    【灰色半透明CSS商务模板】是一款专为商务网站设计的英文网页模板,其特色在于采用灰色调和半透明效果,营造出一种简洁而高级的视觉体验。在网页设计领域,CSS(Cascading Style Sheets)是用于描述HTML或XML(包括...

Global site tag (gtag.js) - Google Analytics