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

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

news 2026/3/28 18:35:03

一、背景半透明设置

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

如何高效获取QQ音乐资源？MCQTSS_QQMusic带来的无损音乐解析方案

如何高效获取QQ音乐资源&#xff1f;MCQTSS_QQMusic带来的无损音乐解析方案 【免费下载链接】MCQTSS_QQMusic QQ音乐解析 项目地址: https://gitcode.com/gh_mirrors/mc/MCQTSS_QQMusic MCQTSS_QQMusic是一款专注于QQ音乐资源解析的开源工具&#xff0c;能够帮助用户突破…...

编程新知 2026/3/28 18:16:19

Jessibuca播放器在低代码平台中的集成实践：5分钟为你的应用添加实时视频能力

Jessibuca播放器在低代码平台中的集成实践&#xff1a;5分钟为你的应用添加实时视频能力 当企业需要快速构建内部管理系统或行业解决方案时&#xff0c;低代码平台正成为提升开发效率的利器。而视频能力作为现代应用的基础需求&#xff0c;如何在不编写复杂代码的情况下实现专业…...

编程新知 2026/3/28 18:02:15

Visio网络拓扑图绘制实战：从基础操作到高级定制

1. Visio网络拓扑图绘制入门指南 第一次接触Visio画网络拓扑图时&#xff0c;我也被那些复杂的图标和连接线搞得头晕眼花。但用顺手后发现&#xff0c;这玩意儿比PS简单多了&#xff0c;就像用Word画图一样自然。先说说最基础的准备工作&#xff1a;安装Visio时记得勾选"网…...

编程新知 2026/3/28 17:58:14

新手前端第一课：在快马平台用ai生成一个属于自己的“notepad++”

作为一个刚接触前端开发的新手&#xff0c;我最近在InsCode(快马)平台上尝试做了一个简易版的文本编辑器&#xff0c;感觉特别适合用来理解基础的前端开发逻辑。整个过程就像搭积木一样有趣&#xff0c;现在把学习心得分享给大家。 项目构思阶段 我想做一个类似notepad的简易编…...

编程新知 2026/3/28 17:48:05

用PyTorch复现掌纹识别顶会论文：从VGG16到ResNet152的模型蒸馏踩坑实录

从VGG16到ResNet152&#xff1a;掌纹识别模型蒸馏实战中的关键挑战与解决方案 掌纹识别作为生物特征识别领域的重要分支&#xff0c;近年来在深度学习技术的推动下取得了显著进展。然而&#xff0c;当我们将论文中的理论模型转化为实际可运行的代码时&#xff0c;往往会遇到一系…...

编程新知 2026/3/28 17:42:00

从零到一：在KEIL5中高效搭建华大HC32F460单片机开发环境

1. 开发环境搭建前的准备工作 第一次接触华大HC32F460单片机时&#xff0c;我完全被各种文件搞得晕头转向。后来才发现&#xff0c;只要理清楚文件结构&#xff0c;搭建开发环境其实并不复杂。这里分享下我的实战经验&#xff0c;帮你避开那些新手常踩的坑。 首先需要明确的是…...

编程新知 2026/3/28 15:51:04

清华团队发布机器人版“GPT时刻”：UniDex让机械手看懂世界，零样本操控万物！

80%成功率&#xff0c;碾压式超越现有方案&#xff0c;灵巧手操控迎来“GPT”时刻这篇论文用一种极其优雅且强大的方式&#xff0c;解决了机器人领域一个长期存在的根本性难题&#xff1a;如何让形态各异、复杂无比的灵巧手&#xff0c;像人类一样&#xff0c;看一眼就能学会使…...

编程新知 2026/3/28 15:24:58

Seurat实战：如何用FindMarkers函数精准鉴定单细胞亚群（附避坑指南）

Seurat实战&#xff1a;用FindMarkers函数精准鉴定单细胞亚群的7个关键策略 单细胞RNA测序技术正在彻底改变我们对复杂组织的理解能力。在肌肉组织、肿瘤微环境或大脑皮层等高度异质性的样本中&#xff0c;准确识别和注释细胞亚群是每个研究者面临的重大挑战。Seurat工具包中的…...

编程新知 2026/3/28 13:46:30

书匠策AI：解锁毕业论文写作新姿势，你的学术“超级大脑”已上线！

毕业季的钟声敲响&#xff0c;论文写作的“战役”也随之打响。面对堆积如山的文献、错综复杂的逻辑框架&#xff0c;以及那令人抓狂的格式要求&#xff0c;你是不是也感到力不从心&#xff0c;甚至开始怀疑人生&#xff1f;别怕&#xff0c;今天咱们就来认识一位学术界的“超级…...

编程新知 2026/3/28 10:14:43

基于Docker与Orthanc构建轻量级医学影像PACS系统实践

1. 为什么选择DockerOrthanc搭建PACS系统 第一次接触医学影像管理系统时&#xff0c;我被传统PACS的复杂部署流程吓到了——需要配置数据库、安装依赖库、调试网络参数&#xff0c;光是环境准备就要花上大半天。直到发现Orthanc这个宝藏工具&#xff0c;配合Docker容器化技术&a…...

编程新知 2026/3/28 9:54:37