`
wb1991wb
  • 浏览: 157106 次
  • 来自: 上海
社区版块
存档分类
最新评论

【转】CSS设置透明背景

阅读更多

全透明代码:{background:transparent}
半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

如何用CSS实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现,我们有更简单的做法:
HTML代码:

<div class="alpha1">
  <div class="ap2">
      <p>背景为红色(#FF0000),透明度20%。</p>
  </div>
</div>



CSS代码:

.alpha1{
    width:300px;
    height:200px;
    background-color:#FF0000;
    filter: Alpha(Opacity=30);
}
.ap2{
    position:relative;
}



  这样基本就可以实现啦,也不用担心定位和自适应问题,最大的问题是仅IE支持。

  如果兼容FF、OP怎么写呢?首先,上面这种定法是不行的啦,那就只能用两个层重叠的方法啦。

  改下页面结构与CSS样式:

HTML代码:

<div class="alpha1">
  <div class="ap2">
      <p>背景为红色(#FF0000),透明度20%。</p>
  </div>
  <!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
</div>


CSS代码:


.alpha1,.alpha2{
    width:100%;
    height:auto;
    min-height:250px;/* 必需 */
    _height:250px;/* 必需 */
    overflow:hidden;
    background-color:#FF0000;/* 背景色 */
}
.alpha1{
    filter:alpha(opacity=20); /* IE 透明度20% */
}
.alpha2{
    background-color:#FFFFFF;
    -moz-opacity:0.8; /* Moz + FF 透明度20%*/
    opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/
}
.ap2{
    position:absolute;
}
分享到:
评论

相关推荐

    html+css透明背景

    本文将深入探讨如何使用HTML和CSS实现半透明背景,以及如何确保这种效果在不同的浏览器(包括IE6、7、8,Chrome和Firefox)中得到良好的兼容性。首先,我们来理解一下“半透明背景,内容不透明”这一需求。 在CSS中...

    CSS代码实现背景透明而文字不透明

    在提供的文件中,`透明背景.html` 可能是一个包含这些CSS技术演示的HTML文件,而 `9.jpg` 可能用于测试背景透明效果时作为背景图片。在开发过程中,可以利用这个示例文件来测试不同浏览器下的显示效果,确保在各种...

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

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

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

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

    css半透明效果

    例如,设置一个元素的`opacity`为0.5,那么这个元素就会显示为50%的透明度: ```css .element { opacity: 0.5; } ``` 然而,`opacity`属性会影响元素及其所有子元素的透明度。如果只想改变元素背景的透明度,而不...

    CSS 背景渐变

    CSS 设计指南学习小结

    jquery css3带透明背景登录注册表单代码.rar

    《使用jQuery和CSS3创建透明背景的登录注册表单》 在现代网页设计中,用户界面的美观性和交互性已经成为吸引用户的重要因素。本资源"jquery+css3登录注册表单界面模板,透明登录注册表单代码"提供了一种利用jQuery...

    css背景图片的背景裁切、背景透明度、背景变换等效果运用

    正如前面所说,仅仅依靠CSS现有的属性,我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果,我们需要借助CSS的其他方法来实现,比如说CSS伪元素,他可以帮助我们模拟出这些CSS无法...

    网页特效 | 纯CSS控制DIV背景透明效果

    纯CSS控制DIV背景透明效果,没有什么好解释的,代码全在文件里面,直接预览或者用记事本打开即可。rgba参数(red,green.,blue,alpha),alpha值0-1 ie滤镜参数#3363370b,前两位为16进制透明度, 比如说值是上面用到的...

    CSS透明度定义

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

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

    本案例中,我们关注的是"纯CSS3背景透明的Speech Bubbles对话气泡",这是一种在网页中实现对话或者提示信息展示的创新方式。 首先,了解什么是**CSS3 Speech Bubbles**。在网页设计中,对话气泡通常用于模拟人与人...

    gif loading 透明背景

    在IT行业中,尤其是在网页设计和开发领域,"gif loading 透明背景"是一个常见的需求。GIF(Graphics Interchange Format)是一种流行的图像文件格式,尤其适用于创建动态图像,如动画。透明背景则是指图像中某些部分...

    设置头像及透明背景

    综上所述,实现“设置头像及透明背景”涉及到了前端开发中的多个技术点,包括CSS样式设计、JavaScript交互、文件读取API、响应式布局、性能优化以及浏览器兼容性处理。通过熟练掌握这些知识点,可以创建出美观且功能...

    简洁透明网格css模板

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

    半透明背景的下拉菜单

    要创建半透明背景,我们可以使用CSS中的`rgba()`函数,它允许我们指定颜色的同时设定透明度。例如,如果希望背景为淡灰色且半透明,可以这样写: ```css .submenu { background-color: rgba(255, 255, 255, 0.8); ...

    CSS视频教程设置网页背景

    在观看这节“CSS视频教程设置网页背景”时,记得实践操作,尝试不同的属性组合,以便更好地理解和掌握CSS背景设置的技巧。同时,后续的课程中还会涵盖更多CSS高级特性,继续学习将有助于提升你的网页设计技能。

    gif透明背景loading图片大全

    4. **前端开发应用**:这些gif透明背景loading图片可以直接应用到网页或者移动应用的前端代码中,通过CSS或JavaScript来控制显示和隐藏,实现动态加载效果。例如,可以用作Ajax请求的加载指示器,或者在页面元素加载...

    css 背景半透明最佳实践

    ### CSS背景半透明最佳实践详解 #### 一、引言 在Web开发中,实现背景半透明效果是一种常见的需求,特别是在需要美观与交互性并存的设计中。这种效果不仅可以增加页面的美观度,还能提高用户体验。然而,在不同的...

    jquery css3带背景透明登录注册表单提交代码

    1. **透明度和 rgba()**:CSS3引入了`opacity`属性和rgba颜色值,可以实现元素的背景透明,为表单创造出半透明效果,提升设计感。 2. **边框动画**:如圆角边框`border-radius`、阴影`box-shadow`,以及过渡`...

    DivCSS网站布局视频教程第5课 CSS设置网页背景

    在本节“DivCSS网站布局视频教程第5课:CSS设置网页背景”中,我们...理解并熟练掌握这些背景设置技巧,对于提升网页设计的视觉吸引力和用户体验至关重要。通过不断实践和实验,你可以创造出更具个性化的网页背景效果。

Global site tag (gtag.js) - Google Analytics