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

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

news 2026/5/12 22:24:26

一、背景半透明设置

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

ChatGPT 2026新增“因果推理引擎”功能（OpenAI内部白皮书首次公开）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ChatGPT 2026“因果推理引擎”功能全景概览 ChatGPT 2026 引入的“因果推理引擎”&#xff08;Causal Reasoning Engine, CRE&#xff09;标志着大语言模型从关联统计迈向可解释性因果建模的关键跃迁。…...

编程新知 2026/5/12 22:11:40

三维动画课程期末复盘：从零搭建我的马卡龙童话游乐场✨

当我按下 3ds Max 的渲染按钮&#xff0c;看着浅蓝的摩天轮缓缓转动、粉白的旋转木马跟着节奏起舞、淡紫色热气球轻轻飘动时&#xff0c;我才真正意识到&#xff1a;为期一学期的三维动画课程&#xff0c;就这样在我的指尖落下了帷幕。从刚打开软件连工具栏都认不全的 “小白”…...

编程新知 2026/5/12 21:58:36

爆单实操课：从3C到美妆，跨境商家如何用AI神器搞定TikTok本土化

每天都有无数跨境卖家在各大社群里发问&#xff1a;怎么用ai生成带货视频&#xff0c;有哪些工具比较好用&#xff1f; 在 TikTok 这个极度依赖内容爆发的平台上&#xff0c;不同类目的产品对视频素材的需求千差万别。靠人工剪辑不仅效率低&#xff0c;且极难跨越本土化语言的障…...

编程新知 2026/5/12 21:24:30

MGRE实验报告

一.实验概述实验名称&#xff1a;MGRE实验实验目的&#xff1a;掌握 PPP 协议的 PAP/CHAP 认证与 HDLC 封装配置&#xff0c;理解不同广域网链路协议的工作机制与认证流程。实现 MGRE 环境&#xff08;R1 为 Hub&#xff09;与 GRE 环境的部署&#xff0c;理解点到多点 VPN 与点…...

编程新知 2026/5/12 21:18:00

对lsof、tcpdump、strace命令的简单记录

1. lsof (List Open Files) —— “谁占用了资源&#xff1f;” 核心哲学&#xff1a;Linux 中一切皆文件&#xff08;包括磁盘文件、网络 Socket、设备&#xff09;。 常用操作&#xff1a;lsof -i :15000&#xff1a;查看指定端口的进程占用及连接状态&#xff08;LISTEN/EST…...

编程新知 2026/5/12 21:09:51

【限时解密】ElevenLabs未公开的“Voice Stability Index”（VSI）指标解析——专业级语音稳定性评估体系首度披露

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;【限时解密】ElevenLabs未公开的“Voice Stability Index”&#xff08;VSI&#xff09;指标解析——专业级语音稳定性评估体系首度披露 VSI 的本质与工程意义 Voice Stability Index&#xff08;VSI&…...

编程新知 2026/5/12 20:44:24

VLC源码深度定制：3大核心模块解析与编译实践

VLC源码深度定制&#xff1a;3大核心模块解析与编译实践 【免费下载链接】vlc VLC media player - All pull requests are ignored, please use MRs on https://code.videolan.org/videolan/vlc 项目地址: https://gitcode.com/gh_mirrors/vl/vlc 你是否曾想过&#xff…...

编程新知 2026/5/12 19:01:31

告别预装旧版Demo：详解mmWave SDK两种刷写模式（Demonstration vs. CCS Development）及适用场景

告别预装旧版Demo&#xff1a;详解mmWave SDK两种刷写模式&#xff08;Demonstration vs. CCS Development&#xff09;及适用场景 当你第一次拿到毫米波雷达评估模块&#xff08;EVM&#xff09;时&#xff0c;预装的Demo固件可能已经过时半年甚至更久。这时候你会面临一个关键…...

编程新知 2026/5/12 18:36:27

神经进化算法实战：从零构建AI Flappy Bird游戏智能体

1. 项目概述&#xff1a;当AI学会玩像素小鸟如果你玩过那个让人又爱又恨的《Flappy Bird》&#xff0c;一定对那只在绿色水管间反复横跳的小鸟记忆犹新。但你想过吗&#xff0c;如果让一群“数字小鸟”自己学会玩这个游戏&#xff0c;会是什么景象&#xff1f;这正是“AI Flapp…...

编程新知 2026/5/12 18:13:57

jQuery WeUI移动端UI组件库架构解析与实现原理深度指南

jQuery WeUI移动端UI组件库架构解析与实现原理深度指南 【免费下载链接】jquery-weui 由于前端业界早已以React/Vue/Angular为主&#xff0c;个人也多年未使用过jQuery&#xff0c;此仓库已不再维护。推荐大家尽快转向 AntD、Element等更先进的UI库&#xff0c;https://ant.des…...

编程新知 2026/5/12 16:49:24