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

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

news 2026/2/8 18:30:52

一、背景半透明设置

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

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/2/7 6:10:30

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/1/29 3:35:37

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07