首页 > css教程 > 正文

css如何设置透明度?设置透明度的两种方法(代码实例)

原创 2018-09-15 14:29:29 0 800
赞助会员专享特权
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、css rgba()设置颜色透明度

语法:

rgba(R,G,B,A);

RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

rgba()里的值的介绍:

R:红色值。正整数 (0~255)

G:绿色值。正整数 (0~255)

B:蓝色值。正整数(0~255)

A:透明度。取值0~1之间

rgba()只是单纯的可以设置颜色透明度,这样在页面的布局中有很多应用。比如说:让背景出现透明效果,但上面的文字不透明。

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>rgba()</title>
		<style>
			.demo{
				width: 350px;
				height: 300px;
				margin: 50px auto;
			}
			.demo *{
				width: 120px;
				height: 120px;
				margin: 10px;
				float: left;
			}
			.demo1{
				background:rgba(255,0,0,1);
			}
			.demo2{
				background:rgba(255,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">背景色不透明,文字不透明!</div>
			<div class="demo2">背景色半透明,文字不透明!</div>
		</div>
	</body>
</html>

效果图:

1.jpg

上例中,设置的颜色值是一样的,只是透明度不同。这样看不出来有除了颜色之外的不同,我们在父容器demo上也设置一个背景色,这样的效果图:

2.jpg

这样就可以看出:第一个盒子(demo1)没有设置透明度,红色完全把下面盒子(demo)的颜色给覆盖住了;第二个盒子(demo2)设置了透明度,使得颜色半透明,没有把下面盒子(demo)的颜色给完全覆盖,而是混合显示了。

二、css opacity属性设置背景透明度

语法:

opacity: value ;

value :指定不透明度,从0.0(完全透明)到1.0(完全不透明)。

opacity属性具有继承性,会使容器中的所有元素都具有透明度;

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>opacity属性</title>
		<style>
			.demo{
				width: 280px;
				height: 140px;
				margin: 50px auto;
			}
			.demo1,.demo2{
				width: 120px;
				height: 120px;
				margin: 10px;
				float: left;
				background:#2DC4CB;
			}
			.demo1{
				opacity:1;
			}
			.demo2{
				opacity:0.5;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">
				<p>背景色不透明,文字不透明!</p>
			</div>
			<div class="demo2">
				<p>背景色透明,文字也透明!</p>
			</div>
		</div>
	</body>
</html>

效果图:

3.jpg

opacity:0.5;使得demo2容器的所以元素都呈现半透明。

总结:rgba()方法与opacity方法虽然都可以实现透明度效果,但rgba()只作用于元素的颜色或其背景色(设置了rgb()透明度元素的子元素不会继承其透明效果);而opacity具有继承性,既作用于元素本身,也会使元素内的所有子元素具有透明度。至于在什么场景下使用那种方法就要看实际需要了。希望这个简单的教程可以帮助到你!

以上就是css如何设置透明度?设置透明度的两种方法(代码实例)的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:rgba() opacity css
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • CSS3透明属性opacity_html/css_WEB-ITnose
  • CSS的opacity属性_html/css_WEB-ITnose
  • CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
  • CSS3的opacity属性带来的层叠顺序问题解决方法
  • css如何设置透明度?设置透明度的两种方法(代码实例)
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    Python2和Python3之间有什么区别 1000
    使用Python可以做什么 955
    Python的优势和不足有哪些 729

    相关视频教程

  • HTML/CSS  5小时基础入门教程 HTML/CSS 5小时基础入门教程
  • HTML+CSS基础入门教程 HTML+CSS基础入门教程
  • CSS  在线手册 CSS 在线手册
  • CSS3  入门教程 CSS3 入门教程
  • 相关视频章节