html字体颜色反色,根据背景颜色反转CSS字体颜色
慕侠2389804
我知道这是一个老问题,但我想在我得知之前添加另一个我一直在使用的解决方案mix-blend-mode。我们的想法是将信息复制在两个层中,即背景和前景,其中背景和前景具有不同的背景和文本颜色。这些在尺寸和文字方面是相同的。在这两者之间,我使用剪切框div将顶层裁剪为所需的宽度,显示未剪裁的顶层,并显示裁剪窗口外的背景图层。这与接受的答案中的“Two div”解决方案类似,但使用额外的剪辑框。如果需要,它允许轻松居中文本,并简单,直接地选择颜色。HTML:
display: block;
margin: 0;
/* Choose desired padding/height in coordination with font size */
padding: 10px;
height: 28px;}#background {
position: relative;
/* Choose a border to your liking, or none */
border: 1px solid lightgray;
/* Choose your desired text attributes */
text-align: center;
font-family: Calibri, "Sans Serif";
font-size: 16pt;
/* Set the desired width of the whole progress bar */
width: 75%;
/* Choose the desired background and text color */
background-color: white;
color: black;}#foreground {
position: absolute;
left: 0;
top: 0;
/* Choose the desired background and text colors */
background-color: navy;
color: white;}#boundbox {
position: absolute;
left: 0;
top: 0;
overflow: hidden;}我使用jQuery以编程方式设置百分比进度,并确保前景的宽度与背景的宽度匹配,并且它们具有相同的文本。这也可以使用纯Javascript轻松完成。// Set foreground width to background width// Do this after DOM is ready$('#foreground').width($('#background').width())// Based upon an event that determines a content change// you can set the text as in the below examplepercent_complete = 45 /* Compute a % complete value */$('#foreground').text(`${percent_complete}% complete`)$('#background span').text($('#foreground').text())$('#boundbox').css('width', `${percent_complete}%`)这是一个小提琴:进度条。我在Chrome,Firefox和Microsoft Edge中对此进行了测试。
html字体颜色反色,根据背景颜色反转CSS字体颜色相关推荐
- 【OpenCV 例程200篇】38. 图像的反色变换(图像反转)
[OpenCV 例程200篇]38. 图像的反色变换(图像反转) 欢迎关注 『OpenCV 例程200篇』 系列,持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列,持续更新中 灰度 ...
- png images反色保留背景透明
将src-png-folder目录下的所有png images反色并保留保留透明不变. import os from PIL import Imagedef get_files(src_path):r ...
- html字体颜色反色,HTML5:画布上的反色文本颜色
更新:大多数较新的浏览器现在支持混合模式"差异",可以达到相同的效果. context.globalCompositeOperation = "difference&qu ...
- html字体颜色随背景改变,根据背景颜色反转CSS字体颜色
我知道这是一个老问题,但我想在我得知之前添加另一个我一直在使用的解决方案mix-blend-mode. 我们的想法是将信息复制在两个层中,即背景和前景,其中背景和前景具有不同的背景和文本颜色.这些在尺 ...
- JAVA反色计算方法的改进和修正
Java中计算Color的相反颜色,经常使用下面的方法 public static Color Color2Contrary(Color color) {return new Color(255 - ...
- Qimage颜色显示反色总结
Qimage颜色格式出现只要是出现颜色反色,即红蓝色颠倒的情况,一般是opencv中图像显色为BGR,而QImage中颜色显示为RGB,所以需要将其转色 分为一下两种情况 一种可以直接将mat定义的图 ...
- 教你一个图片快速取反色的方法
有时候遇到黑色背景,白色字体的图片,就很令人无奈,丢又不想丢,看又看不清,这里可以用Windows自带画图一键取反色,变成白色背景,黑色字体的清晰图片. 右键图片,点击编辑 点击画图工具栏中的选择 在 ...
- canvas 图片反色
代码实例: <!DOCTYPE HTML> <html> <head><meta charset="utf-8"><title ...
- css字体倾斜角度_css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(代码实例)...
在前端网页开发的时候,往往会用到一些渐变色的效果,这样可以使得前端页面更加美观.那么这些渐变效果是如何用css代码实现出来的?本章就给大家带来css如何实现渐变效果?css背景色渐变与文字渐变效果的实 ...
最新文章
- 用计算机画曲线教案,小学信息技术曲线工具教案
- SAP PP ECM的生效日期如何影响工单?
- 台安变频器n2按键说明_台安N2变频器说明书.pdf
- “RuntimeWarning: overflow encountered in ubyte_scalars像素加减运算溢出异常”原因以及解决办法
- python页面切换_Python+Selenium学习--窗口切换及操作元素
- perl删除文件_Perl小知识语法重点和数据类型
- linux awk sed经典题,awk与sed命令面试题整理
- 去A片马赛克,开发者被抓了。
- 自由空间电磁波功率衰减公式
- 如何通过IP共享文件
- 安装pandas库报错_Pandas1.0.3安装失败module 'pandas' has no attribute 'plotting
- Ubuntu Server 18.04配置无线Wifi网卡
- numpy 三角函数 sin()、cos()、tan() 反三角函数arcsin,arccos,arctan numpy.degrees()
- Win32反汇编(二)几种常见的指令反汇编详解:EAX、MOVSX与MOVZX、LEA、SUB、CMP与转移指令
- 在线教育投融数据(2015-2020年)
- 还在用开发者工具上传小程序? 快来试试 miniprogram-ci 提效摸鱼
- 为什么要嫁给物理学3
- 你应该知道的十八大著名定律法则
- Linux 音频 API 指南
- 发现细分赛道:费控SaaS跨越资本寒冬
热门文章
- mysql模糊查询xml_在userMapper.xml文件中模糊查询的常用的3种方法
- 如何用P6软件编制项目进度计划(下)
- PaddyShop开源商城源码(可免费商用)
- Think PHP 提示验证码输入错误
- 单臂路由的详解及简单配置
- 机电一体化综合实训【1】
- big code: code2seq论文复现 Generating Sequences from Structured Representations of Code
- 统计Java进程中的线程状态(jstack+linux)
- Zookeeper Java 客户端 ——Apache Curator
- 混合网络:为自动驾驶设计的一种快速车辆检测系统