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>

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

这样就可以看出：第一个盒子（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>

效果图：

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

总结： rgba()方法与opacity方法虽然都可以实现透明度效果，但rgba()只作用于元素的颜色或其背景色（设置了rgb(）透明度元素的子元素不会继承其透明效果）；而opacity具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度。

css设置透明度的两种方法相关推荐

css如何设置透明度？设置透明度的两种方法（代码实例）
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
html背景颜色透明度hex,CSS背景颜色设置透明度的两种方法（8位hex和rgba）
目录一. 6位HEX转RGBA 二.8位HEX 在写微信小程序的时候,有个需求是按背景颜色 background-color要设透明度0.85,让背景图片 background-image透一点出来 ...
css如何设置透明度？两种方法
一.css rgba()设置颜色透明度语法: rgba(R,G,B,A); RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写.RGBA 颜 ...
html同一段文字设置不同颜色字体,CSS设置一个文字两种颜色
CSS设置一个文字两种颜色属于前端实例代码,有关更多实例代码大家可以查看. CSS可以将一个文字设置为两种颜色,下面介绍一下如何实现此效果. 代码实例如下: 犀牛前端部落 .antzone{ disp ...
css设置行间距的三种方法
css设置行间距的三种方法 1.使用数值来设置行间距 CSS <!DOCTYPE html> <html><head><meta charset=" ...
css画三角形的两种方法
css画三角形的两种方法画三角形 1 border 2 css的clip-path 画三角形 1 border <div class="left-down-small" / ...
php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
Android设备设置代理的两种方法
本文将介绍两种给给android设备设置网络代理的方法,一种是直接在网络设置中操作,另一种是通过adb指令操作第一种最常用的通过设置页面操作(此处以夜神模拟器为例讲解,其他设备操作方式基本类似) 操 ...

css设置透明度的两种方法

css设置透明度的两种方法相关推荐

最新文章

热门文章