Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何获得实心背景色和半透明叠加色的有效效果(6位十六进制值)?

如何获得实心背景色和半透明叠加色的有效效果(6位十六进制值)?
EN

Stack Overflow用户
提问于 2018-11-19 16:20:56
回答 2查看 578关注 0票数 0

假设我有2种颜色:实心背景色(6位十六进制值)和带有不透明度的叠加色(6位十六进制值和一些不透明度百分比)。

得到有效的合成颜色(6位十六进制值)的函数是什么?换句话说,如果我在同一区域(首先是背景,然后是重叠)绘制两种颜色,然后使用滴管工具获得颜色值,我如何编程获得相同的颜色值?

任何编程语言(甚至是伪代码)在这里都很好。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-12-03 14:49:06

您需要阿尔法合成公式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
result_red =  fg_red * α_fg + bg_red * (1 - α_fg)
result_blue =  fg_blue * α_fg + bg_blue * (1 - α_fg)
result_green =  fg_green * α_fg + bg_green * (1 - α_fg)

您可以在W3C候选推荐中找到更多信息和示例。

票数 1
EN

Stack Overflow用户

发布于 2018-11-19 19:41:24

RGB颜色代码(和十六进制)有三个不同的部分--红色、绿色和蓝色的值。要找到两种颜色的“和”,您需要单独计算每个部分的平均值,然后将它们重新组合在一起。下面是一些JavaScript,它将两种颜色分割成数字数组,平均值它们的值,并返回一个新数组。这也适用于RGBA。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function calcColorAverages(firstColor, secondColor){

  let newColor = [];

  for(let index in firstColor){
    let colorOne = firstColor[index]
    let colorTwo = secondColor[index]

    let average = Math.round((colorOne + colorTwo) / 2);

    newColor[index] = average;

  }

  return newColor

}

let red = [255, 0, 0]
let blue = [0, 0, 255]

let purple = calcColorAverages(red, blue)

console.log(purple) //128, 0, 128
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53384506

复制
相关文章
CSS半透明边框效果
以border外边缘为边界剪除背景,背景范围为border、padding、content。
全栈程序员站长
2022/09/14
1.3K0
CSS半透明边框效果
使用 SetWindowCompositionAttribute 来控制程序的窗口边框和背景(可以做 Acrylic 亚克力效果、模糊效果、主题色效果等)
Windows 系统中有一个没什么文档的 API,SetWindowCompositionAttribute,可以允许应用的开发者将自己窗口中的内容渲染与窗口进行组合。这可以实现很多系统中预设的窗口特效,比如 Windows 7 的毛玻璃特效,Windows 8/10 的前景色特效,Windows 10 的模糊特效,以及 Windows 10 1709 的亚克力(Acrylic)特效。而且这些组合都发生在 dwm 进程中,不会额外占用应用程序的渲染性能。
walterlv
2023/10/22
1.7K0
使用 SetWindowCompositionAttribute 来控制程序的窗口边框和背景(可以做 Acrylic 亚克力效果、模糊效果、主题色效果等)
【Android】设置透明、半透明等效果
View v = findViewById(R.id.content);//找到你要设透明背景的layout 的id
易寒
2021/12/22
3.6K0
css只设置背景图片半透明,css 设置背景色或图片半透明的方法(图文)
css设置背景颜色半透明或者设置背景图片半透明,但有的时候只需要设置最外层的div为半透明里面的内容不需要设置
全栈程序员站长
2022/09/13
2.6K0
css只设置背景图片半透明,css 设置背景色或图片半透明的方法(图文)
实心轮廓
pixelpoints.shape= (9129, 1, 2) pixelpoints= [[ 9 217] [ 9 218] [ 9 219] ... [115 225] [115 226] [115 227]]
裴来凡
2022/05/28
5790
实心轮廓
POH和POV事件获得屏幕字段的值
在SCREEN显示之前,系统会自动将程序变量值存放到屏幕字段中:在PAI事件中,系统会自动将屏幕字段的值更新到相应的程序变量中。 在SCREEN LOGIC中我们还有POH和POV事件,所以需要调用DYNP_VALUES_READ函数来读取屏幕字段值。
秋白
2022/06/23
1.1K0
RGB颜色值转十六进制颜色值
值”#FF9999″是由红绿蓝三原色组成的颜色,#号后的两位表示红,其后的两位为绿,最后的两位为蓝。
全栈程序员站长
2022/07/05
1.4K0
RGB颜色值转十六进制颜色值
如何获得当前数据库的SCN值
Last Updated: Thursday, 2004-12-02 15:04 Eygle
数据和云01
2018/09/10
1.8K0
jquery获得option的值和对option进行操作
清空 Select: $("#ddlRegType ").empty();  jquery获得值: val()  text()  设置值  val('在这里设置值') 
山河木马
2019/03/05
3.7K0
css实现背景半透明文字不透明的效果
图片.png <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html{ background: #6a8db1; } .aside{ background-color:rgba(
王小婷
2018/05/31
1.3K0
解决echarts的叠堆折线图数据出现坐标和值对不上的问题
在echarts的叠堆折线图中,有这样的一个问题,从后端请求过来的数据是正确的,但是请求的y轴的值和y轴坐标对不上。
王小婷
2019/03/20
4.1K0
解决echarts的叠堆折线图数据出现坐标和值对不上的问题
如何通过Elastic的向量数据库获得词汇和AI技术的最佳搜索效果?
最最近,“向量数据库”已成为数据库领域内最热门的术语,即使非搜索引擎数据库,也在添加向量搜索功能。也许您对向量数据库的火热感到困惑,这是一门新的、前沿技术吗?事实上,向量数据库 已经存在了好几年(很多新的向量库诞生于2019年)。如果您正在寻找最佳的检索性能,那么将基于关键字的搜索(有时称为分词搜索)与基于向量的方法相结合的混合方法代表了最先进的技术。
点火三周
2023/07/24
2.1K0
如何通过Elastic的向量数据库获得词汇和AI技术的最佳搜索效果?
Python+OpenGL绘制旋转的线框立方体和带光照效果的实心立方体
使用Python编写程序,调用OpenGL接口,绘制2个旋转的立方体,其中一个为线框模式,另一个为实心模式,并为实心立方体添加光照效果。
Python小屋屋主
2022/03/07
1.5K0
Python+OpenGL绘制旋转的线框立方体和带光照效果的实心立方体
MFC中如何画带实心箭头的直线
工作中遇到话流程图的项目,需要画带箭头的直线,经过摸索,解决;思路如下: (1) 两个点(p1,p2)确定一个直线,以直线的一个端点(假设p2)为原点,设定一个角度 (2)以P2为原点得到向量P2P1(P),向量P旋转theta角得到向量P1,向量P旋转-theta角得到向量P2 (3)伸缩向量至制定长度,平移变量到直线的末端 (4)现在已经有3个点了,画线就可 具体代码如下: void CworkflowDlg::DrawLine(CPoint p1, CPoint p2) { CClie
用户1198337
2018/01/19
1.9K0
设置导航栏的背景色和标签栏的背景色
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/51282200
用户1451823
2018/09/13
2.5K0
渠道优化完全指南:如何最大化的获得转化效果
只有在对与用户交互的每个元素进行实验、深入分析并优化设计时,才能实现转化漏斗的最大化。
iCDO互联网数据官
2018/07/27
1.7K0
渠道优化完全指南:如何最大化的获得转化效果
Photoshop常用快捷组合技巧工具箱快捷键
M 矩形、椭圆选框工具 C 裁剪工具 V 移动工具 L 套索、多边形套索、磁性套索 W 魔棒工具 J 喷枪工具 B 画笔工具 S 像皮图章、图案图章 Y 历史记录画笔工具 E 像皮擦工具 N 铅笔、直线工具 R 模糊、锐化、涂抹工具 O 减淡、加深、海棉工具 P 钢笔、自由钢笔、磁性钢笔 A 直接选取工具 T 文字、文字蒙板、直排文字、直排文字蒙板 U 度量工具 G 直线渐变、径向渐变、对称渐变、角度渐变、菱形渐变 K 油漆桶工具 I 吸管、颜色取样器 H 抓手工具 Z 缩放工具 D 默认前景色和背景色 X 切换前景色和背景色 Q 切换标准模式和快速蒙板模式 F 标准屏幕模式、带有菜单栏的全屏模式、全屏模式 Ctrl 临时使用移动工具 Alt 临时使用吸色工具 空格临时使用抓手工具 Enter打开工具选项面板 0至9快速输入工具选项(当前工具选项面板中至少有一个可调节数字) [或]循环选择画笔 Shift+[选择第一个画笔 Shift+]选择最后一个画笔
空木白博客
2018/12/18
8220
修改wordpress背景带像素点的颗粒半透明点阵效果
作者:matrix 被围观: 3,560 次 发布时间:2013-09-13 分类:Wordpress 兼容并蓄 | 一条评论 »
HHTjim 部落格
2022/09/26
6290
修改wordpress背景带像素点的颗粒半透明点阵效果
点击加载更多

相似问题

半透明点上的加色

10

来自十六进制RGB值的CSS中的半透明背景色

13

如何制作具有玻璃效果和半透明效果的div?

66

使用颜色矩阵添加色调效果

15

半透明/反混叠光标

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文