实现背景透明 文字不透明效果

1:定位+伪元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="bag"><div class="a">文字文字文字文字文字文字文字文字文字文字</div></div><style>.bag {width: 1000px;height: 500px;position: relative;background: rgba(255, 255, 255, 0.3);}.a::before {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: url(http://csssecrets.io/images/tiger.jpg) center no-repeat;width: 1000px;height: 500px;content: "";z-index: -1;}</style>
</body></html>

2:定位+蒙版

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="bag"><div class="a">文字文字文字文字文字文字文字文字文字文字</div></div><style>.bag {background-size: cover;width: 1000px;height: 500px;background: url(http://csssecrets.io/images/tiger.jpg) center no-repeat;position: relative;}.a {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 1000px;height: 500px;background: rgba(255, 255, 255, 0.3);}</style>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/591715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索Python中生成多样随机数据的神奇之旅

目录 写在开头1 整数和浮点数1.1 `random` 模块的基础用法1.2 `numpy` 库的随机数生成2 字符串和文本数据2.1 随机选择字符串2.2 随机密码和验证码2.3 生成随机姓名和地址2.4 虚拟文本数据集2.5 生成随机颜色值2.6 生成随机国家2.7 生成随机一句话2.8 生成随机公司名称3 日期和…

Jsonpath - 数据中快速查找和提取的强大工具

JSON&#xff08;JavaScript Object Notation&#xff09;在现代应用程序中广泛使用&#xff0c;但是如何在复杂的JSON数据中 查找和提取所需的信息呢&#xff1f; JSONPath是一种功能强大的查询语言&#xff0c;可以通过简单的表达式来快速准确地定位和提取JSON数据。本文将介…

如何将内容转化为流量?媒介盒子分享

软文营销就是将内容转为流量的常见做法&#xff0c;但是有许多企业在做内容时往往一头雾水导致效果不佳&#xff0c;做内容不是光靠写就可以的&#xff0c;还需要做好选题、类型、结构等&#xff0c;今天媒介盒子就来和大家聊聊&#xff1a;如何将内容转化为流量。 一、 确定内…

【SpringBoot开发】之商城项目案例(购物车相关操作)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《SpringBoot开发之商城项目系列》。&#x1f3af…

2023最新租号平台系统源码支持单独租用或合租使用

这是一款租号平台源码&#xff0c;采用常见的租号模式。目前网络上还很少见到此类类型的源码。 平台的主要功能如下&#xff1a; 支持单独租用或采用合租模式&#xff1b; 采用易支付通用接口进行支付&#xff1b; 添加邀请返利功能&#xff0c;以便站长更好地推广&#xf…

每天刷两道题——第三天

1.1两两交换链表中的节点 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09; 输入&#xff1a;[1,2,3,4] 输出&#xff1a;[2,1,4,3…

祝贺首届兽医专业学位研究生创新创业大赛圆满闭幕

为进一步贯彻落实科教兴国、农业强国发展战略&#xff0c;适应兽医行业、产业发展需求&#xff0c;提高兽医专业学位研究生实践创新能力&#xff0c;推动兽医领域高层次应用型人才培养供给侧改革&#xff0c;促进兽医专业学位教育高质量发展&#xff0c;12月28日由中国学位与研…

什么是分布式锁

想象一下&#xff0c;如果没有分布式锁&#xff0c;多个分布式节点同时涌入一个共享资源的访问时&#xff0c;就像一群饥肠辘辘的狼汇聚在一块肉前&#xff0c;谁都想咬一口&#xff0c;最后弄得肉丢了个精光&#xff0c;大家都吃不上。 而有了分布式锁&#xff0c;就像给这块肉…

Python轴承故障诊断 (九)基于VMD+CNN-BiLSTM的故障分类

往期精彩内容&#xff1a; Python-凯斯西储大学&#xff08;CWRU&#xff09;轴承数据解读与分类处理 Python轴承故障诊断 (一)短时傅里叶变换STFT Python轴承故障诊断 (二)连续小波变换CWT_pyts 小波变换 故障-CSDN博客 Python轴承故障诊断 (三)经验模态分解EMD_轴承诊断 …

小秋SLAM入门实战ubuntu所有文章汇总

Ubuntu系统安装详细教程 Ubuntu系统安装ROS详细教程 Ubuntu系统下如何搭建深度学习和SLAM开发环境 Ubuntu系统搭建SLAM开发环境 ubuntu 终端如何停止快速打印的输出以及恢复命令 ubuntu 终端如何快速打开当前路径下的图形化窗口界面&#xff1f; killall -9用途用法 ps -xu | …

JAVAEE初阶相关内容第二十弹--HTTP协议

写在前&#xff1a;2024年啦&#xff01;新的一年要努力学习啦 本篇博客围绕HTTP协议&#xff0c;对HTTP协议进行了解&#xff0c;需要理解其工作过程&#xff0c;对HTTP协议格式要清楚&#xff0c;通过抓包工具进行协议分析&#xff0c;认识“方法”、“请求报头”&#xff0c…

爬虫与反爬-localStorage指纹(某易某盾滑块指纹检测)(Hook案例)

概述&#xff1a;本文将用于了解爬虫中localStorage的检测原理以及讲述一个用于检测localStorage的反爬虫案例&#xff0c;最后对该参数进行Hook断点定位 目录&#xff1a; 一、LocalStorage 二、爬虫中localStorage的案例&#xff08;以某盾滑块为例&#xff09; 三、如何…

CSP CCF 201512-2 消除类游戏 C++满分题解

解题思路&#xff1a; 1.用两个矩阵来存储原始值&#xff0c;其中一个永远不改变&#xff0c;只用来判断&#xff0c;这样可以防止消除某一行或某一列后影响其它行或列。 2.记录下每一行每个数字出现的次数和每一列每一个数字出现的次数。 3.只有当某一行或某一列的某个数出…

Ubuntu之修改时区/时间

1、查看当前时间及时区状态 sudo timedatectl status # 显示当前时区为Asia/Shanghai 2、查看当前系统时间 sudo date 3、查看当前系统时间及时区 sudo date -R # 显示当前时间及对应时区&#xff0c;时区为“0800”北京时区 4、修改硬件时间 修改日期格式&#xff1a…

51单片机项目(26)——基于51单片机的超声波测距protues仿真

1.功能设计 用51单片机做的超声波测距系统&#xff0c;用的传感器是HCSR04&#xff0c;将距离实时显示在LCD1602屏幕上&#xff01;&#xff01;内含keil工程 完整的protues文件 可以运行&#xff01;&#xff01;&#xff01; 仿真截图&#xff1a;&#xff08;有一丢丢的误差…

[Mac软件]ColorWell For Mac 7.4.0调色板生成器

美丽而直观的调色板和调色板生成器是任何Web或应用程序开发人员工具包的必要补充&#xff01; 创建无限数量的调色板&#xff0c;快速访问所有颜色信息和代码生成&#xff0c;用于应用程序开发&#xff0c;非常简单。可编辑调色板数据库允许您存档和恢复任何调色板&#xff0c…

Python贪心算法(Kruskal算法)生成对抗网络和强化学习数据集(计算机视觉)

最小生成树 生成树被定义为包含图的所有顶点的连通无向图的树状子图。 或者&#xff0c;用外行的话来说&#xff0c;它是形成一棵树&#xff08;无环&#xff09;的图的边的子集&#xff0c;其中图的每个节点都是树的一部分。 最小生成树具有生成树的所有属性&#xff0c;并附…

2022 软件测试选择题【太原理工大学】

目前题型如下&#xff0c;选择题 20 个 * 2 分&#xff0c;填空题 10 个 * 1 分&#xff0c;判断题 10 个 * 1 分&#xff0c;简答题 5 分 * 4 个&#xff0c;大题 20 分。以上都是老师说的&#xff0c;先看选择题。 一、选择题 1. 以下关于软件测试的叙述不正确的是&#xff0…

x-cmd pkg | lazygit - git 命令的终端 UI

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 lazygit 由 Jesse Duffield 于 2018 年使用 Go 语言构建的 git 终端交互式命令行工具&#xff0c;旨在终端界面中便捷管理 git 存储库。 首次用户 使用 x lazygit 即可自动下载并使用 在终端运行 eval "$(curl …

一站式指南:了解和绘制项目基线

项目基线是记录下来的一个起点&#xff0c;用来建立项目的绩效指标&#xff0c;并将其与之前的基准进行比较。对于所有团队而言&#xff0c;基线是进行有效绩效测量的必需工具。 项目成功的每一步都要依赖于一个坚固的基线。研究表明&#xff0c;在48个大型项目中&#xff0c;…