`

控制网页背景、边框的透明度及全透明

阅读更多

一、设置首页主体部分(中、下部所有模块)的背景颜色半透明设置

说明:rgba()方法只适用非IE类浏览器。

 

设置的代码如下:

<style type=text/css>
.main{background:rgba(255, 255, 255, 0.4);}
</style>

 

说明:rgba(255, 255, 255, 0.4)表示设置背景为白色的,透明度为40%,为非IE类浏览器的设置方法,对IE类浏览器没效果。如若不设置透明度的代码:.main{background:rgb(255, 255, 255);}

 

设置IE类浏览器的背景透明(透明度设为80%,因为此方法将设置所有内容都会有80%的透明度,因此不能设太低):

设置的代码如下

<style type=text/css>
.main {background-color:rgb(255, 255, 255);filter:alpha(opacity=80);}
</style> 

 

二、设置首页主体部分(中、下部所有模块)的的背景颜色完全不显示(即全透明)

代码如下(此方法既适用IE也适用非IE类浏览器):

<style type=text/css>
.main {background:transparent;}
</style>

分享到:
评论

相关推荐

    纯CSS3背景透明的Speech Bubbles对话气泡

    PNG是一种支持透明度的图像格式,常用于网页设计中的图标或背景。在这个案例中,可能是使用了两张PNG图片来增加对话气泡的复杂性和真实感,例如,一张可能是气泡的形状,另一张可能是内部的尖角或者阴影效果。通过...

    网页颜色代码全

    此外,还可以利用透明度(通过改变颜色代码中的Alpha通道)来创建渐变效果或者半透明元素。 在实际应用中,颜色代码不仅限于基本的HTML元素,也可以应用于CSS(层叠样式表)来控制字体、边框、背景、过渡等更复杂的...

    网页颜色代码全集 颜色

    5. **透明度**:在CSS3中,还可以通过`opacity`属性或RGBA颜色代码来控制元素的透明度。例如,`opacity: 0.5;`或`rgba(255, 0, 0, 0.5)`。 6. **颜色工具**:在实际开发中,通常会使用颜色选择器工具来辅助选取颜色...

    全透明登录框网页模板

    【全透明登录框网页模板】是一种网页设计中的特殊样式,其特点是登录界面具有高透明度,使得背景元素能够透过登录框展示,为用户提供独特的视觉体验。这种设计通常应用于追求现代感、简洁风格或者希望与网站整体环境...

    css3系列教程(RGBA).rar

    使用RGBA的好处在于,设计师可以更加精确地控制元素的背景颜色和边框颜色的透明度,从而实现与背景或其他元素的无缝融合。比如,可以创建一个半透明的按钮,让文字清晰可见,同时又能让背景图片透过来。这对于创建...

    CSS 背景全攻略

    你可以使用颜色名称、RGB值、十六进制颜色码或透明度(transparent)来指定颜色。例如: ```css background-color: blue; background-color: rgb(0, 0, 255); background-color: #0000ff; background-color: ...

    透明png图片齐全个人收藏保证你喜欢(一)

    在设计、网页制作、图形编辑等领域,PNG图片因其高质量和透明度支持而广受欢迎。本资源集合是个人多年精心收集的透明PNG图片,涵盖了多个主题,包括人物、动物和通用标志等,确保能够满足不同创意需求。 1. **PNG...

    网页颜色代码全集

    网页颜色代码是网页设计中的重要元素,用于定义文本、背景、边框等视觉元素的颜色。在HTML、CSS以及各种Web开发语言中,颜色代码的使用是必不可少的。本资源“网页颜色代码全集”提供了全面的颜色代码信息,帮助设计...

    ps设计制作时尚网页效果图

    - 调整透明度,并添加1px的白色边框,增强视觉效果。 **第十步:添加浏览框** - 复制黑色方框图层,并调整大小以创建浏览框。 - 设置较低的透明度,以区分不同层级的信息。 **第十一步:添加文字** - 使用简洁大方...

    网站透明表单模板下载

    在透明表单模板中,设计师会精心调整这些元素的样式,包括字体、颜色、边框、背景透明度等,以达到预期的视觉效果。例如,表单字段可能会有淡色边框,透明背景,以及与网站主题相匹配的按钮设计。 对于开发者来说,...

    网页特效全集第一期(各类网页特效 图片 flash 广告)

    实现这一效果通常需要JavaScript和CSS的配合,利用CSS3的透明度和变换属性。 2. **拉链广告特效**: 拉链广告是一种创新的广告展现形式,模拟拉链开合的动作来展示或隐藏广告内容,增加用户的互动性。这种特效可能...

    绿色卡通树木英文推广网页css3模板-黑色 插画 孔雀 css3 html5 博客 菜单 简洁 标准 清新 透明.rar

    至于“清新”和“透明”,可能体现在色彩搭配和元素透明度的处理上。清新通常指明亮、自然的色彩,给人带来轻松愉快的感觉。透明效果可能用于某些背景或图层,增加视觉层次感,使网页看起来更加通透。 总的来说,这...

    CSS3最全手册

    - **透明度与混合模式**:`opacity`和`mix-blend-mode`控制元素的透明度和混合效果。 - **变形与旋转**:`transform`允许元素的几何变形和旋转。 - **颜色与色彩模式**:新增更多的颜色表示方法,如HSL和HSLA,以及...

    网页制作的四本基本手册

    在“CSS2.0”手册中,读者会学习到如何使用CSS来控制页面元素的外观,包括字体、颜色、背景、边框等。浮动、定位和透明度等CSS2.0引入的概念,为页面布局提供了前所未有的灵活性。CSS选择器是实现样式的工具,盒模型...

    WebKit 效果全集

    WebKit提供了一系列视觉特效属性,包括`overflow`控制内容溢出的方式,`opacity`调整元素透明度,`-webkit-animation`和`-webkit-transition`实现动态效果如动画和过渡。还有`transform`属性,用于元素的二维和三维...

    CSS3.0中文参考手册

    CSS3.0的边框功能得到显著增强,支持圆角边框`border-radius`、边框阴影`box-shadow`,以及线性渐变`linear-gradient`和径向渐变`radial-gradient`作为背景,使网页元素的视觉效果更加丰富多彩。 **三、多列布局** ...

    曹鹏CSS视频教程-15.颜色 1.rar

    2. **透明度与Alpha通道**:CSS3引入了opacity属性和rgba()函数,允许你设定元素的透明度,实现色彩渐变和半透明效果。 3. **背景颜色与边框颜色**:如何使用background-color和border-color属性为元素设置背景和...

    透明登录框响应式网页模板

    这种设计通常采用半透明或全透明的背景,使得登录框融入到页面的视觉背景中,创造出轻盈且吸引人的效果。透明度的调整可以根据用户设备的特性进行优化,确保在任何背景下都能清晰易读。 具体实现透明登录框时,...

    HTML5网页模板-漂亮木纹背景家居家装企业网站模板.zip

    4. **关于我们**:介绍公司的历史、团队成员和企业文化,以增加企业的透明度。 5. **联系我们**:包含地址、电话、邮箱等联系方式,以及在线留言表单,方便用户直接联系。 6. **新闻与活动**:发布公司新闻、行业...

    静态网页 221html css个模板 (129).rar

    同时,CSS也可以用来控制图片的显示方式,如大小、位置、透明度等。 综上所述,这个压缩包是一个宝贵的资源库,不仅提供了多种预设的HTML和CSS布局,还便于学习者了解网页开发的基本原理,实践不同设计风格,并快速...

Global site tag (gtag.js) - Google Analytics