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背景色渐变与文字渐变效果的实 ...
最新文章
- 二条件if else语句可以用离散二分布概率函数实现
- 从《英雄联盟》的装备系统谈玩家行为与游戏设计
- 开源网站统计程序 oracle,利用百夫长统计程序源码免费搭建独立网站统计软件工具...
- Oracle 10g、11g :RAC关闭、启动、重启步骤
- python入门基本笔记_Python入门基础知识笔记
- php集中管理,PHPWind 7.5 SP2 公布 三大改良增强营运基本功能
- AcWing 154. 滑动窗口
- Linux 用top命令查看CPU和内存使用情况
- rk3399 调试一款新的摄像头驱动
- JeePlus:代码生成器
- 一台服务器​最大并发 tcp 连接数多少?65535?
- 安装miktex+winedit
- STM32F100X RCC_APB2Periph_AFIO--复用IO时钟的使用
- Java设计模式-代理模式笔记
- oracle with as用法
- oracle10g安装未知错误
- ArcGIS中将线转换为面
- 理想汽车×OceanBase:当造车新势力遇上数据库新势力
- 边工作边考研上岸,认真总结出了几点更加容易上岸的方法,值得借鉴!
- 双目立体视觉:SAD算法