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

css:怎么设置div背景图的透明度为0.6不影响内部元素

目录

1.前言

2.解决思路

3.具体实例

4.另外一种实例

5.总结


1.前言

div背景图为project-bg.png,设置div透明度为0.6;div内的名称、数值受透明度影响颜色显示不正常;怎么设置背景图的透明度为0.6不影响内部元素;

2.解决思路

在 CSS 中,如果你想设置 div 的背景图的透明度而不影响其内部内容的透明度,可以使用伪元素 ::before::after 来实现。这样背景图的透明度只会影响背景本身,而不会影响 div 内部的内容。

以下是一个示例,展示如何使用伪元素 ::before 来设置背景图的透明度为 0.6,同时保持 div 内部内容的颜色正常显示。

3.具体实例

<div class="container"><h1>项目名称</h1><p>数值: 12345</p>
</div>

css设置

.container {position: relative;width: 300px;height: 200px;/* 其他样式 */
}.container::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('project-bg.png');background-size: cover;background-position: center;opacity: 0.6;z-index: -1; /* 确保背景图在内容下方 */
}.container h1, .container p {/* 内容样式 */color: white; /* 根据需要调整颜色 */z-index: 1; /* 确保内容在背景图上方 */position: relative; /* 确保 z-index 生效 */
}

上述代码说明

HTML 结构:
一个包含标题和数值的 div 容器。
CSS 样式:
容器样式:
position: relative;:使容器成为相对定位,以便伪元素可以相对于它定位。
width 和 height:设置容器的尺寸。
伪元素 ::before:
content: '';:必需,用于生成伪元素。
position: absolute;:使伪元素绝对定位,相对于容器定位。
top: 0; 和 left: 0;:使伪元素覆盖整个容器。
width: 100%; 和 height: 100%;:使伪元素与容器大小一致。
background-image: url('project-bg.png');:设置背景图片。
background-size: cover;:使背景图片覆盖整个容器。
background-position: center;:使背景图片居中。
opacity: 0.6;:设置背景图的透明度为 0.6。
z-index: -1;:确保背景图在内容下方。
内容样式:
color: white;:设置内容的颜色(根据需要调整)。
z-index: 1;:确保内容在背景图上方。
position: relative;:使 z-index 生效。

4.另外一种实例

如果背景是颜色,不是一个图片,可以直接使用下面这种方法

background: rgba(41,76,123,0.3);

5.总结

运行示例
将上述 HTML 和 CSS 代码放入你的项目中,运行后你会看到背景图的透明度为 0.6,而 div 内部的内容颜色正常显示。

注意事项
确保背景图片路径正确。
根据实际需求调整 div 的尺寸和内容样式。
如果内容有多层嵌套,确保所有需要在背景图上方显示的元素都设置了 position: relative; 和 z-index。
通过这种方法,你可以轻松地设置背景图的透明度,而不会影响 div 内部内容的显示。

相关文章:

css:怎么设置div背景图的透明度为0.6不影响内部元素

目录 1.前言 2.解决思路 3.具体实例 4.另外一种实例 5.总结 1.前言 div背景图为project-bg.png&#xff0c;设置div透明度为0.6&#xff1b;div内的名称、数值受透明度影响颜色显示不正常&#xff1b;怎么设置背景图的透明度为0.6不影响内部元素&#xff1b; 2.解决思路 …...

Kubernetes ConfigMaps

文章目录 简介创建ConfigMaps通过命令行使用字面值创建 ConfigMap。从文件创建ConfigMaps从多个文件创建 ConfigMap从目录创建 ConfigMap使用 YAML 创建 ConfigMap 使用ConfigMaps使用 ConfigMaps作为环境变量使用 ConfigMap 作为卷挂载使用 ConfigMap 中的特定的key ConfigMap…...

前端热门面试题目[一](HTML、CSS、Javascript、Node、Vue、React)

如何设计一个前端页面&#xff0c;实现PC端访问展示Web应用&#xff0c;移动端访问展示H5应用&#xff1f; 为了实现这一功能&#xff0c;通常需要使用响应式设计或者服务器端检测用户设备并返回相应的页面。以下是一些实现方法&#xff1a; 响应式设计&#xff1a;通过CSS媒…...

Swift 宏(Macro)入门趣谈(五)

概述 苹果在去年 WWDC 23 中就为 Swift 语言新增了“其利断金”的重要小伙伴 Swift 宏&#xff08;Swift Macro&#xff09;。为此&#xff0c;苹果特地用 2 段视频&#xff08;入门和进阶&#xff09;颇为隆重的介绍了它。 那么到底 Swift 宏是什么&#xff1f;有什么用&…...

ES6 Set、Map、WeakSet、WeakMap 四者辨析与实战应用详解

在 ES6 中,Set 和 Map 是两种非常重要的新增数据结构,它们都具有独特的特性和用途,能够帮助开发者更高效地处理和管理数据。除此之外,WeakSet 和 WeakMap 作为这两种数据结构的变种,也具有一些特殊的功能。下面我会从 Set 数据结构、Map 数据结构、WeakSet 和 WeakMap 对比…...

【数据结构】哈希表实现

前言 在本篇博客中&#xff0c;作者将会带领你使用C语言来实现一个哈希表。 一.什么是哈希表 在实现哈希表之前&#xff0c;我们先来学习一下什么是哈希表。 在传统的数据结构中&#xff0c;例如数组&#xff0c;链表和二叉平衡树等数据结构&#xff0c;这些数据结构的元素关键…...

Verilog的线与类型与实例化模块

1、线与类型 在Verilog中&#xff0c;线与&#xff08;wire-AND&#xff09;类型通常用于描述多个信号进行逻辑与&#xff08;AND&#xff09;操作的电路行为。虽然Verilog本身没有直接定义一种名为“线与”的数据类型&#xff0c;但可以通过使用wire类型结合特定的逻辑操作来…...

芯片测试-RF中的S参数,return loss, VSWR,反射系数,插入损耗,隔离度等

RF中的S参数&#xff0c;return loss, VSWR&#xff0c;反射系数&#xff0c;插入损耗&#xff0c;隔离度 &#x1f4a2;S参数&#x1f4a2;&#x1f4a2;S11与return loss&#xff0c;VSWR&#xff0c;反射系数&#x1f4a2;&#x1f4a2;S21&#xff0c;插入损耗和增益&#…...

强化学习的几个主要方法(策略梯度、PPO、REINFORCE实现等)(上)

本笔记有大量参考蘑菇书EasyRL https://datawhalechina.github.io/easy-rl/#/ 包括其配图和部分文本。 1. 基本概念 1.1 基本流程 强化学习是一种学习框架&#xff0c;其中智能体&#xff08;Agent&#xff09; 通过与 环境&#xff08;Environment&#xff09; 的交互&#…...

Git远程仓库操作

文章目录 远程仓库连接Gitee克隆代码 多人协同问题说明 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Git专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月1日13点10分 远程仓库 Git 是分布式版本控制系统&#xff0c;同一个 Git …...

GAGAvatar: Generalizable and Animatable Gaussian Head Avatar 学习笔记

1 Overall GAGAvatar&#xff08;Generalizable and Animatable Gaussian Avatar&#xff09;&#xff0c;一种面向单张图片驱动的可动画化头部头像重建的方法&#xff0c;解决了现有方法在渲染效率和泛化能力上的局限。 旋转参数 现有方法的局限性&#xff1a; 基于NeRF的方…...

什么是VISUAL STUDIO CODE (V S CODE)

Visual Studio Code&#xff08;简称VS Code&#xff09;是由微软开发的一个免费的、开源的源代码编辑器。它是一个轻量级但功能强大的工具&#xff0c;支持多种编程语言和框架&#xff0c;广泛用于开发各种应用程序&#xff0c;尤其是Web开发。VS Code具备以下特点&#xff1a…...

2024年09月中国电子学会青少年软件编程(Python)等级考试试卷(三级)答案 + 解析

青少年软件编程(Python)等级考试试卷(三级) 分数:100 题数:38 一、单选题(共25题,共50分) 1. 以下表达式的值为True的是?( ) A. all( ,1,2,3) B. any([]) C. bool(abc) D. divmod(6,0)...

C++初阶——动态内存管理

目录 1、C/C内存区域划分 2、C动态内存管理&#xff1a;malloc/calloc/realloc/free 3、C动态内存管理&#xff1a;new/delete 3.1 new/delete内置类型 3.2 new/delete自定义类型 4、operator new与operator delete函数 5、new和delete的实现原理 5.1 内置类型 5.2 自定…...

如何查看阿里云ddos供给量

要查看阿里云上的 DDoS 攻击量&#xff0c;你可以通过阿里云的 云盾 DDoS 防护 服务来进行监控和查看攻击数据。阿里云提供了详细的流量监控、攻击日志以及攻击趋势分析工具&#xff0c;帮助用户实时了解 DDoS 攻击的情况。以下是九河云总结的查看 DDoS 攻击量的步骤&#xff1…...

MySQL中的事务隔离全详解

第一部分&#xff1a;MySQL事务的特性与并行事务引发的问题 1. 什么是事务及其四大特性&#xff08;ACID&#xff09;&#xff1f; 事务&#xff08;Transaction&#xff09;是数据库操作的基本单位&#xff0c;它将一组操作组合在一起&#xff0c;以确保这些操作作为一个整体…...

异常--C++

文章目录 一、异常的概念及使用1、异常的概念2、异常的抛出和捕获3、栈展开4、查找匹配的处理代码5、异常重新抛出6、异常安全问题7、异常规范 二、标准库的异常 一、异常的概念及使用 1、异常的概念 异常处理机制允许程序中独立开发的部分能够在运行时就出现的问题进行通信并…...

SeggisV1.0 遥感影像分割软件【源代码】讲解

在此基础上进行二次开发&#xff0c;开发自己的软件&#xff0c;例如&#xff1a;【1】无人机及个人私有影像识别【2】离线使用【3】变化监测模型集成【4】个人私有分割模型集成等等&#xff0c;不管是您用来个人学习还是公司研发需求&#xff0c;都相当合适&#xff0c;包您满…...

锁-读写锁-Swift

实现一 pthread_mutex_t&#xff1a; ReadWriteLock/Sources/ReadWriteLock at main SomeRandomiOSDev/ReadWriteLock GitHub https://swiftpackageindex.com/reers/reerkit/1.0.39/documentation/reerkit/readwritelock/ // // Copyright © 2022 reers. // // Pe…...

Kafka如何保证消息可靠?

大家好&#xff0c;我是锋哥。今天分享关于【Kafka如何保证消息可靠&#xff1f;】面试题。希望对大家有帮助&#xff1b; Kafka如何保证消息可靠&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Kafka通过多种机制来确保消息的可靠性&#xff0c;主要包…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

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 …...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

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

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

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...