【CSS】CSS 背景设置 ⑨ ( 背景半透明设置 )
创始人
2024-06-02 17:03:52

文章目录

  • 一、背景半透明设置
    • 1、语法说明
    • 2、代码示例





一、背景半透明设置



1、语法说明


背景半透明设置 可以 使用 rgba 颜色值设置半透明背景 ;

下面的 CSS 样式中 , 就是 设置黑色背景 , 透明度为 20% ;

background: rgba(0, 0, 0, 0.2);

颜色的透明度 alpha 取值范围是 0 ~ 1 之间 ,

在使用时 , 可以 省略 0.x 前面的 0 , 直接使用 .x 作为透明度值 , 如 :

background: rgba(0, 0, 0, .2);

背景半透明 指的是 盒子的背景设置为半透明 , 可以看到下面的内容 , 盒子里面显示的内容不受背景影响 , 照常显示 ;


2、代码示例


在第一个盒子中 设置背景颜色 :

background: rgba(0, 0, 0, .2);

在第二个盒子中 设置背景颜色 :

background: rgb(0, 0, 0);

界面的总体背景是黄色 , 在第一个半透明背景的盒子中 , 可以看到背后的黄色背景 , 第二个不透明的背景盒子中 , 黄色背景被完全覆盖 ;


代码示例 :

 

     背景半透明设置



背景半透明设置
背景半透明设置对照组

展示效果 :

在这里插入图片描述

上一篇：婚庆小程序开发怎么做_微信小程序实现婚礼一站式服务预定

下一篇：关于伺服调试接线问题的讲解

相关内容

热门资讯

海关在一船舶检出1000余只德... 【#海关在一船舶检出1000余只德国小蠊#】据“海关发布”微信公众号消息，近日，石家庄海关所属曹妃甸...
宁忠岩启蒙教练祝玉良：“这枚金... 中新网哈尔滨2月20日电 题：宁忠岩启蒙教练祝玉良：“这枚金牌太为中国长志气”中新网记者 王妮娜“激...
马上驰骋练出稳定腰腹 【#马上驰骋练出稳定腰腹#】#一个动作缓解过年久坐腰背僵硬# 过年久坐、追剧、打牌，腰背部是不是又酸...
东西问丨重兵压境、E-3出动，... 中新网北京2月20日电 题：重兵压境、E-3出动，美伊战争一触即发？记者 贺劭清美伊关系，再临悬崖。...
日本神奈川交警违规执法涉案27... 据日本广播协会（NHK）2月20日报道，日本神奈川县警方查出有多名交通警察多年来违规执法，涉案271...