3.7背景色半透明

这一片月

已于 2022-09-04 14:38:36 修改

阅读量1.1k

点赞数 1

分类专栏： css样式文章标签： html css 前端

于 2022-09-04 14:20:17 首次发布

本文链接：https://blog.csdn.net/qq_62865634/article/details/126688859

版权

css样式专栏收录该内容

41 篇文章 0 订阅

订阅专栏

提示：css3为我们背景颜色半透明效果background：rgba。

1、语法：

div{

background：rgba（255,255,255,0.5）;

}

解释：

第一个255，对应参数“r”红色。

第二个255，对应参数“g”绿色。

第三个255，对应参数“b”蓝色。

第四个0.5，对应参数“a”透明度，透明度0~1范围之间。

注意：

我们习惯写“.3”前面0可以省略

background：rgba（0,0,0，.3）;

背景设置为半透明，内容不会受到影响。

自己代码展示：

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-06 16:47:51
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-09-04 14:33:47
 * @FilePath: \code\前端代码\css学习知识\css背景\3.7背景色半透明.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色透明</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            display: inline-block;
            /* background-color: black; */
            background: rgba(0, 0, 0, 0.5);
            /* 这里表示：透明颜色
            r表示第一个参数0，表示红色
            g表示第二个参数0，表示绿色
            b表示第三个参数0，表示蓝色
            a表示第四个参数0.5，表示透明度
            注意：透明度范围为0~1范围
            后面那个透明度我们也可以写成“.5” */
        }
    </style>

</head>

<body>
    <div>
        你好
    </div>
</body>

</html>

显示结果：