`
zhangyaochun
  • 浏览: 2621818 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css3案例之---采用rgba实现背景透明内容不透明

阅读更多

 

   前言

 

     部分内容来自doy的博客:《CSS3 RGBA不是简单的RGB与opacity相加》,感谢作者!

 

     个人做积累学习用

 

   正文

 

     前面我也有一篇简单整理过rgba,如果不熟悉的可以看看那个。

 

     我们来看下面这个例子:

 

<div id="up-wrap">
	我是上面这层的文字
</div>
	
	
<div id="down-wrap">
	我是下面这层的文字
</div>

 

 #up-wrap,#down-wrap{
		width:380px;
		height:80px;
		padding:20px;
		position:relative;
		color:#fff;
		z-index:3;
}
	
#up-wrap{
		background:blue;
		opacity:.7;
		filter:alpha(opacity=70);
}
	
#down-wrap{
		z-index:1;
		margin-left:10px;
		margin-top:-110px;
		background:red;
}

 

    我们采用opacity来进行透明处理,但是效果:

 

     
 
    
      当然,这个不是我们需要的,我们设置了上面的字体颜色为#fff,我们可以用rgba来实现改进!

 

#up-wrap{
	background:rgba(0,0,255,0.7);
}

 

    效果图

 


    
 

 

 

  • 大小: 11.4 KB
  • 大小: 11.2 KB
分享到:
评论

相关推荐

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

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

    CSS3蓝色透明方块背景特效.zip

    总结起来,"CSS3蓝色透明方块背景特效"是利用CSS3的新特性,如`rgba()`和`opacity`实现背景透明,以及`transition`和`animation`实现动态效果。这个特效为网页设计师提供了一种增强用户体验的方式,同时也是一个学习...

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

    如果只想让背景颜色变得半透明,而保持内容的不透明,我们可以使用`background-color`的rgba(Red, Green, Blue, Alpha)格式。rgba允许我们指定颜色的红、绿、蓝通道,并且添加一个介于0(透明)和1(不透明)之间...

    CSS3模糊背景穿孔动画特效.zip

    总结来说,"CSS3模糊背景穿孔动画特效"利用了CSS3的`filter`、`opacity`、`rgba()`、`clip-path`和`mask`等特性,结合JavaScript实现动态的视觉效果。这种技术在网页设计中能提升用户体验,特别是在引导页上,可以...

    css3半透明遮罩lightbox效果.zip

    CSS3提供了`rgba()`函数,允许我们创建具有透明度的色彩,例如`rgba(0, 0, 0, 0.8)`创建了一个80%不透明的黑色遮罩。通过调整第四参数,我们可以控制遮罩的透明度。 2. **图片容器(Image Container)**:Lightbox...

    CSS3立体旋转透明发光特效.zip

    【CSS3立体旋转透明发光特效】是Web前端开发中一种常用的技术,用于为网页元素添加动态效果,提高用户体验。在CSS3中,我们可以通过transform、opacity以及box-shadow等属性实现这些特效。 首先,让我们深入了解CSS...

    手机wrap网站半透明按钮背景切换手机网站首页(单页)

    半透明按钮通常采用CSS3中的`rgba()`函数或`opacity`属性来实现透明度设置。`rgba()`函数允许开发者指定红色、绿色、蓝色以及透明度(alpha)四个参数,其中透明度的取值范围为0到1之间,0表示完全透明,1表示不透明...

    微信小程序-透明渐变色封面的实现.zip

    透明度的控制通过CSS的opacity属性或者rgba()函数完成。在上面的例子中,rgba()函数的四个参数分别代表红、绿、蓝三原色的强度(范围0-255)和透明度(0-1)。透明度为0表示完全透明,1表示完全不透明。 至于多图...

    CSS3设计颜色样式2.pdf

    【CSS3设计颜色样式2】这篇文档主要涵盖了CSS3中关于颜色样式的新特性和如何定义透明度的方法。在CSS3之前,我们只能通过RGB模式定义颜色值,而通过`opacity`属性来设置元素的不透明度。CSS3引入了三种新的颜色值...

    CSS3半透明白块向上飘浮动画特效

    在本示例中,我们探讨的是一个利用CSS3实现的半透明白块向上飘浮的动画特效,这种特效常用于网站顶部的banner背景,能够为网站增添动态视觉效果,提升用户体验。下面我们将深入讨论这个特效背后的CSS3技术及其实现...

    css3登录界面效果粒子动态背景——(纯蓝色背景不透明)

    在本文中,我们将深入探讨如何使用CSS3来创建一个具有粒子动态背景的纯蓝色不透明登录界面效果。CSS3作为现代网页设计的核心技术之一,提供了丰富的样式和动画功能,使得开发者能够创造出各种视觉上引人入胜的效果。...

    微信小程序仿淘宝滚动导航栏背景色渐变

    在这个案例中,我们可以设定导航栏的背景颜色变化作为一个动画,通过改变`opacity`属性来实现从透明到不透明的渐变效果。 Swiper组件是微信小程序内置的一个滑动切换视图的组件,常用于轮播图或者类似的商品列表...

    61、Jquery背景透明特效

    在本文中,我们将深入探讨如何使用jQuery实现背景透明特效,这是一种常见的网页动态效果,可以增强用户体验并提升网站的视觉吸引力。jQuery是一个强大的JavaScript库,它简化了JavaScript的使用,使得添加复杂的交互...

    CSS3设计颜色样式1.pdf

    在CSS3中,我们可以利用RGBA的颜色模式创建半透明效果,如在阴影边框中使用`box-shadow`属性,使得元素的边缘呈现出柔和的阴影,同时不影响背景的显示。 2. **HSL颜色值** HSL(Hue, Saturation, Lightness)颜色...

    纯CSS3实现的Lightbox弹出框动画效果源码.zip

    在这个案例中,我们将讨论如何使用纯CSS3来实现这种Lightbox弹出框的动画效果。 首先,我们要理解CSS3中的关键帧动画(Keyframe Animations)是实现此类动画效果的核心。CSS3的关键帧动画允许开发者定义一个动画...

    CSS3实现冒着热气的花瓷碗动画效果源码.zip

    在本资源中,我们主要探讨的是如何利用CSS3来创建一个动态的、具有真实感的“冒着热气的花瓷碗”动画效果。CSS3(层叠样式表第三版)是Web开发中用于定义页面样式的语言,它提供了丰富的功能和效果,包括2D和3D转换...

    神奇的css3鼠标滑过动画效果

    在这个特定的案例中,我们讨论的是一个利用CSS3实现的鼠标滑过动画效果,具体表现为圆形图标的文字和阴影在鼠标悬停时进行360度旋转并伴随透明度变化。这种效果能够提升用户界面的互动性和视觉吸引力。 首先,让...

    css3 hover图片遮罩文字显示代码.zip

    接着,为了实现文字遮罩效果,我们可以在图片之上创建一个绝对定位的子元素,通常设置为黑色半透明背景,以遮盖部分图片: ```css .text-mask { position: absolute; /* 绝对定位 */ top: 0; left: 0; width: ...

    css3图片列表鼠标悬停遮罩特效代码.zip

    在本案例中,"css3图片列表鼠标悬停遮罩特效代码.zip" 提供了一个使用CSS3实现的特定功能:当鼠标悬停在图片列表上时,会显示一个遮罩层并产生动态效果。这种效果可以被广泛应用于各种网站设计,如相册展示、产品...

    html页面全屏半透明demo

    CSS3引入了`opacity`属性来控制元素的透明度,其值范围是0到1,0表示完全透明,1表示完全不透明。为了使整个页面背景半透明,可以将`body`的`opacity`设为小于1的值,例如0.5: ```css body { opacity: 0.5; } ```...

Global site tag (gtag.js) - Google Analytics