当前位置： 首页 > news >正文

【CSS】CSS 背景设置 ( 背景半透明设置 )

news 文章来源：https://blog.csdn.net/song19990524/article/details/132520183 2025/2/8 9:51:56

一、背景半透明设置

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);

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

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>背景半透明设置</title><base target="_blank"/><style>.alpha {width: 300px;height: 100px;background: rgba(0, 0, 0, .2);color:white;text-align: center;line-height: 100px;}.box {width: 300px;height: 100px;background: rgb(0, 0, 0);color:white;text-align: center;line-height: 100px;}body {background-color: yellow;}</style>
</head>
<body>
<body><div class="alpha">背景半透明设置</div><div class="box">背景半透明设置对照组</div>
</body>
</html>

展示效果 :

 

相关文章：

【CSS】CSS 背景设置 ( 背景半透明设置 )

一、背景半透明设置 1、语法说明 背景半透明设置 可以 使用 rgba 颜色值设置半透明背景 ; 下面的 CSS 样式中 , 就是 设置黑色背景 , 透明度为 20% ; background: rgba(0, 0, 0, 0.2);颜色的透明度 alpha 取值范围是 0 ~ 1 之间 , 在使用时 , 可以 省略 0.x 前面的 0 , 直接…...

编程日记 2023/8/28 4:14:35

基于android的学生公寓后勤系统/学生公寓管理系统APP

摘 要 随着网络科技的发展&#xff0c;移动智能终端逐渐走进人们的视线&#xff0c;相关应用越来越广泛&#xff0c;并在人们的日常生活中扮演着越来越重要的角色。因此&#xff0c;关键应用程序的开发成为影响移动智能终端普及的重要因素&#xff0c;设计并开发实用、方便的应…...

编程日记 2023/8/28 4:13:34

跳跃游戏 II

跳跃游戏 II 题目: 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处:0 < j < nums[i] i j < n 返回到达…...

编程日记 2023/8/28 4:12:30

GPT教我学Vue-Router

文章目录 路由的基本配置路由嵌套路由守卫路由参数编程式导航 路由的基本知识点 Vue Router 是 Vue.js 官方的路由管理器。它允许你在 Vue 应用程序中构建单页面应用&#xff08;SPA&#xff09;&#xff0c;并实现了客户端路由功能。下面是一些 Vue Router 的重要知识点&#…...

编程日记 2023/8/28 4:11:28

Tokenview再度升级：全新Web3开发者APIs数据服务体验！

Tokenview发布全新版本的区块链APIs和数据服务平台&#xff0c;为开发者打造更强大、更便捷的开发体验&#xff01; 此次升级&#xff0c;我们整合了开发者使用习惯以及Tokenview产品优势。我们深知对于开发者来说&#xff0c;时间是非常宝贵的&#xff0c;因此我们努力提供一…...

编程日记 2023/8/28 4:10:26

什么是原型链(Prototype Chain)？它在JavaScript中有什么作用？请解释一下JavaScript中的“this”关键字的含义和用法。

1、什么是原型链(Prototype Chain)&#xff1f;它在JavaScript中有什么作用&#xff1f; 原型链&#xff08;Prototype Chain&#xff09;是一种在JavaScript中创建对象的方式&#xff0c;它允许我们通过继承来扩展对象的属性和方法。 在原型链中&#xff0c;每个对象都有一个…...

编程日记 2023/8/28 4:09:25

JS-this知识点、面试题

一、this指向什么 1.简介 2.规则一&#xff1a;默认绑定 3.规则二&#xff1a;隐式绑定 4.规则四&#xff1a;new绑定 5.规则三&#xff1a;显式绑定 call、apply、bind 6.内置函数的绑定 7.规则优先级 8.this规则之外--es6剪头函数 9.ES6剪头函数this 二、This面试题 面试题…...

编程日记 2023/8/28 4:07:21

【C++入门到精通】C++入门 —— 多态（抽象类和虚函数的魅力）

阅读导航 前言一、多态的概念1. 概念2. 多态的特点 二、多态的定义及实现1. 多态的构成条件2. 虚函数3. 虚函数的重写⭕虚函数重写的两个例外1.协变(基类与派生类虚函数返回值类型不同)2.析构函数的重写(基类与派生类析构函数的名字不同) 4. override 和 final&#xff08;C11 …...

编程日记 2023/8/28 4:05:12

基于springboot学生社团管理系统/基于Java的高校社团管理系统的设计与实现

摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&…...

编程日记 2023/8/28 4:04:11

【C++】C++ 引用详解 ⑦ ( 指针的引用 )

文章目录 一、二级指针可实现的效果二、指针的引用1、指针的引用 等同于 二级指针 ( 重点概念 )2、引用本质 - 函数间接赋值简化版本3、代码示例 - 指针的引用 一、二级指针可实现的效果 指针的引用 效果 等同于 二级指针 , 因此这里先介绍 二级指针 ; 使用 二级指针 作为参数 …...

编程日记 2023/8/28 4:03:09

ubuntu安装goland

下载并解压goland sudo tar -C /opt/ -xzvf goland-2023.1.3.tar.gz配置应用图标 新建文件&#xff1a; vim /usr/share/applications/goland.desktop文件中写入如下内容&#xff1a; [Desktop Entry] TypeApplication NameGoLand Icon/opt/GoLand/bin/goland.png Exec/op…...

编程日记 2023/8/28 4:02:06

海康摄像头通过SDK接入到LiveNVR实现双向语音喊话对讲与网页无插件播放，并支持GB28181级联语音对讲...

目录 1、确认摄像头是否支持对讲2、摄像头视频类型复合流3、通道配置SDK接入4、视频广场点击播放5、相关问题 5.1、如何配置通道获取直播流&#xff1f;5.2、如何GB28181级联国标平台&#xff1f;6、RTSP/HLS/FLV/RTMP拉流Onvif流媒体服务 1、确认摄像头是否支持对讲 可以访问摄…...

编程日记 2023/8/28 4:01:04

解锁开发中的创意：用户为中心的设计思维的力量

引言 设计思维&#xff0c;起源于20世纪60年代&#xff0c;是一种解决问题的方法。它不仅仅是设计师的专利&#xff0c;而是一种可以广泛应用于各种行业和领域的方法。设计思维强调了用户至中的重要性&#xff0c;认为任何问题的解决都应该从用户的需求出发。这种方法鼓励我们…...

编程日记 2023/8/28 4:00:02

python+mysql+前后端分离国内职位数据分析（源码+文档+指导）

系统阐述的是使用国内python职位数据分析系统的设计与实现&#xff0c;对于Python、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计&#xff0c;描述&#xff0c;实现和分析与测试方面来表明开发的过程。开发中使用了 Flask框架和MySql数据库技术搭建系统的整体…...

编程日记 2023/8/28 3:59:01

uniapp封装ajax请求

import /common/api/interceptor.js; // 引入拦截器文件 export default{common:{baseUrl:"http://localhost:3000/api",data:{},header:{"Access-Control-Allow-Origin":"*","Content-Type":"application/json","Cont…...

编程日记 2023/8/28 3:58:00

电路原理分析2：应急照明灯电路

k是线圈&#xff0c;1-2&#xff08;常开&#xff09;和2-3&#xff08;常闭&#xff09;是2个触点。 1、220v交流电正常供电时&#xff0c;变压器触头位置提供12v的电压&#xff0c;这个时候&#xff0c;v2二极管是导通状态&#xff0c;所以线圈k吸合&#xff0c;这个时候1-2…...

编程日记 2023/8/28 3:56:59

构造函数内的方法 直接写在构造函数内部 与 写在prototype上 的区别

文章目录 前言区别总结 前言 以前没注意过, 去创建一个构造函数的时候, 方法都是直接写在函数内的. 在构造函数需要多次实例化的情况下有缺点, 不过幸好以前项目里的构造函数也不需要多次实例化, 缺点没有生效. 区别 为了比较, 先在构造函数内部直接书写方法, 查看实例化结果…...

编程日记 2023/8/28 3:55:58

系统架构主题之七：基于架构的软件设计方法及应用

1 基于架构的软件设计方法概念 关键词&#xff1a;ABSD、自顶向下、递归迭代、与需求同步、设计元素、视角与视图、用例和质量场景、预期和非预期等。 总的来讲&#xff0c;ABSD方法分为如下六个大的阶段&#xff1a; 1&#xff09;体系结构需求阶段 相比传统软件系统设计&…...

编程日记 2023/8/28 3:54:57

Python-if __name__ == ‘__main__‘和collections.Mapping的用法

1.if __name__ __main__ 1.1解释 if __name__ __main__: 是 Python 中的一个常见惯用法&#xff0c;用于确定一个 Python 脚本是被直接运行还是被导入为模块使用。 在 Python 中&#xff0c;每个模块都有一个特殊的内置变量 __name__&#xff0c;该变量的值决定了模块的运…...

编程日记 2023/8/28 3:53:54

Linux 基金会宣布正式进驻中国

在 LinuxCon 2017 &#xff08;北京&#xff09;即将召开前夕&#xff0c;我们Linux 中国会同 51CTO、开源中国对 Linux 基金会执行董事 Jim Zemlin 进行了一场远跨大洋的视频专访。 在这次专访中&#xff0c;Jim 先生回答了几个开源界和互联网领域关注的问题&#xff0c;并披…...

编程日记 2023/8/28 3:52:53

Pyecharts教程(二)：使用pyecharts绘制3D散点图——以营养元素为例

Pyecharts教程(二)：使用pyecharts绘制3D散点图——以营养元素为例 作者：安静到无声 个人主页 目录 Pyecharts教程(二)：使用pyecharts绘制3D散点图——以营养元素为例1. 准备工作2. 读取JSON数据3. 配置图形选项4. 构造数据5. 实验结果推荐专栏在本文中，我们将学习如何使用…...

编程日记 2023/8/28 3:51:51

软考高级系统架构设计师系列论文第100篇：论软件的可维护性设计

软考高级系统架构设计师系列论文第100篇：论软件的可维护性设计 一、摘要二、正文三、总结一、摘要 2020年3月1日至12月20日，我参加了“数据安全访问平台”项目的开发，担任系统分析员的工作。该项目是某行业用户“数据中心二期”建设的主要内容，目标是：建立数据统一访问接口…...

编程日记 2023/8/28 3:50:51

curl 使用发送POST GET请求 HEADER设置

curl 使用发送POST GET请求 HEADER设置 文章目录 Get请求POST请求1. application/x-www-form-urlencoded2. Multipart/form-data3. application/json4. text/xml 文件内容作为提交的数据 curl 设置自定义HEADER 头注意事项&#xff1a;shell批处理外传 Get请求 get请求偏简单&…...

编程日记 2023/8/28 3:49:47

使用 Transformer 和 Amazon OpenSearch Service 构建基于列的语义搜索引擎

在数据湖中&#xff0c;对于数据清理和注释、架构匹配、数据发现和跨多个数据来源进行分析等许多操作&#xff0c;查找相似的列有着重要的应用。如果不能从多个不同的来源准确查找和分析数据&#xff0c;就会严重拉低效率&#xff0c;不论是数据科学家、医学研究人员、学者&…...

编程日记 2023/8/28 3:48:46

算法通关村第九关——透彻理解二分查找

1.前言 常见的查找算法有顺序查找、二分查找、插值查找、斐波那契查找、树表查找、分块查找、哈希查找等。如果进行归类&#xff0c;那么二分查找、插值查找&#xff08;一种查找算法&#xff09;以及斐波那契查找都可以归为插值查找&#xff08;大类&#xff09;。而插值查找…...

编程日记 2023/8/28 3:47:43

【字节跳动青训营】后端笔记整理-4 | Go框架三件套之GORM的使用

**本人是第六届字节跳动青训营&#xff08;后端组&#xff09;的成员。本文由博主本人整理自该营的日常学习实践&#xff0c;首发于稀土掘金。 我的go开发环境&#xff1a; *本地IDE&#xff1a;GoLand 2023.1.2 *go&#xff1a;1.20.6 *MySQL&#xff1a;8.0 本文介绍Go框架三…...

编程日记 2023/8/28 3:46:41

【TI毫米波雷达笔记】UART串口外设配置及驱动（以IWR6843AOP为例）

【TI毫米波雷达笔记】UART串口外设初始化配置及驱动&#xff08;以IWR6843AOP为例&#xff09; 最基本的工程建立好以后 需要给SOC进行初始化配置 int main (void) {//刷一下内存memset ((void *)L3_RAM_Buf, 0, sizeof(L3_RAM_Buf));int32_t errCode; //存放SOC初…...

编程日记 2023/8/28 3:45:39

C#---第十九课:不同类型方法的执行顺序(new / virtual / common / override)

本文介绍不同类型的方法&#xff0c;在代码中的执行顺序问题&#xff1a; 构造方法普通方法&#xff08;暂用common代替&#xff09;、虚方法&#xff08;Virtual修饰&#xff09;、New方法&#xff08;new修饰&#xff09;三个优先级相同overide方法&#xff08;会替换virtual…...

编程日记 2023/8/28 3:44:38

[pytorch]torch.cuda用法以及判断显卡是不是存在问题

常见用法&#xff1a; torch.cuda.is_available() # 查看是否有可用GPU torch.cuda.device_count() # 查看GPU数量 torch.cuda.get_device_capability(device) # 查看指定GPU容量 torch.cuda.get_device_name(device) # 查看指定GPU名称 torch.cuda.empty_cache() # 清空程序占…...

编程日记 2023/8/28 3:43:36

JUC——多线程补充

前置可看 Java——多线程和锁_java多线程锁_北岭山脚鼠鼠的博客-CSDN博客 线程创建的三种方式 Thread、Runnable、Callable Thread类 Runable接口 Callable接口 Lamda表达式 Lamda表达式_北岭山脚鼠鼠的博客-CSDN博客 静态代理模式(Thread类的原理) 如下代码中 真实对象…...

编程日记 2023/8/28 3:42:34

nas可以做网站下载服务器吗/营业推广的方式有哪些

这篇文章主要介绍了基于Python爬取股票数据过程详解,文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下基本环境配置python 3.6pycharmrequestscsvtime相关模块pip安装即可目标网页分析网页一切的一切都在图里找到数…...

编程日记 2025/2/8 3:49:24

网站制作上海/长沙网站优化对策

使用匿名函数&#xff08;lambda表达式&#xff09;&#xff1a;使用lambda表达式就代表一个函数名称&#xff0c;也就是说不用再为函数重新创建一个名字了。&#xff08;以前在使用函数的时候需要用def来定义一个函数名&#xff0c;而使用lambda表达式就不需要再创建函数名了&…...

编程日记 2025/2/8 0:08:40

房建设计网站好/刷神马seo排名首页排名

使用技术&#xff1a; VuePress - Vue 驱动的静态网站生成器仓库地址&#xff1a;https://github.com/yinian-R/v... 全局安装 ## 安装 yarn global add vuepress # 或者&#xff1a;npm install -g vuepress 现有项目 如果你想在一个现有项目中使用 VuePress&#xff0c;同时想…...

编程日记 2025/2/7 23:18:00

微信网站制作/输入搜索内容

欢迎加QQ群309798848交流C/C/linux/Qt/音视频/OpenCV 源码面前&#xff0c;了无秘密。阅读源码能帮助我们理解实现原理&#xff0c;然后更灵活的运用。 接下来我用VS2015调试Qt5.9源码。 首先提一下&#xff0c;Qt在WinMain中调用用户的main函数&#xff1a; 我们知道&#…...

编程日记 2025/2/7 20:38:35

wordpress博客站点统计代码/公众号开发网站公司

常见的 10个 Redis可视化工具&#xff0c;最全横向评测&#xff01; 转载&#xff1a;https://mp.weixin.qq.com/s/_CsaEsQ-TnzAju3zwspf4g 转载理由&#xff1a;很实用...

编程日记 2025/2/7 18:07:20

企业解决方案有哪些/贵州seo技术查询

我们基于寄存器的方式已经编写了LED驱动&#xff0c;实现点亮/熄灭LED&#xff0c;但是你有没有发现一个问题&#xff0c;就是假设LED修改了一个GPIO&#xff0c;那么需要对应的修改寄存器代码&#xff0c;非常繁琐&#xff0c;而且随着改板次数增加&#xff0c;那么会带来一个…...

编程日记 2025/2/7 16:29:16