CSS如何设置透明度

最新推荐文章于 2024-04-26 19:17:54 发布

一刀一个小西瓜

最新推荐文章于 2024-04-26 19:17:54 发布

阅读量1.1k

点赞数

分类专栏：杂谈 javaweb 文章标签： css html

本文链接：https://blog.csdn.net/weixin_45402023/article/details/109323061

版权

javaweb 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

杂谈

5 篇文章 0 订阅

订阅专栏

CSS里设置透明度的两种方法

1.RGBA
语法如下：

rgba(R,G,B,A);

rgba是Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）四个单词的缩写。

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 type="text/css">
   #Box{
   width:100px;
   height:100px;
   }
   .box1{
   background:rgba(255,255,0,1);
   }
   .box2{
   background: rgba(255,255,0,0.3);
   }
</style>
</head>
<body>
  <div id="Box">
  <div class="box1">这是一个样例这是一个样例这是一个样例</div>
  </div>
  <br/>
  <div id="Box">
  <div class="box2">这是一个样例这是一个样例这是一个样例</div>
  </div>
</body>
</html>

如下图：两个盒子的文字都不会变透明。

在这里插入图片描述

2.opacity属性设置背景透明度

opacity语法：

opacity:value;

其中,value的取值为[0~1]。

opacity属性具有继承性，会使容器中的所有元素都具有透明度，因此字体也会透明。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>opacity</title>
<style type="text/css">
   #Box{
   width:100px;
   height:100px;
   background:#2DC4CB;
   }
   .box1{
   opacity:1;
   }
   .box2{
   opacity:0.3;
   }
</style>
</head>
<body>
  <div id="Box">
  <div class="box1">这是一个样例这是一个样例这是一个样例</div>
  </div>
  <br/>
  <div id="Box">
  <div class="box2">这是一个样例这是一个样例这是一个样例</div>
  </div>
</body>
</html>

如下图：第二个盒子中的文字也变透明了
在这里插入图片描述

一刀一个小西瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS如何设置透明度

CSS里设置透明度有两种方法：1.RGBA语法如下：rgba(R,G,B,A);rgba是Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）四个单词的缩写。rgba（)里的值的介绍：R：红色值，取值为：[0~255]G：绿色值，取值为：[0~255]B：蓝色值，取值为：[0~255]A：透明度，取值为：[0~1]之间rgba()只是单纯的可以设置颜色透明度，但上面的文字不透明，即透明度元素的子元素不会继承其透明效果。2.opacity属性设置背景透明度
复制链接

扫一扫