html背景颜色透明度hex,CSS背景颜色设置透明度的两种方法(8位hex和rgba)
目录
一、 6位HEX转RGBA
二、8位HEX
在写微信小程序的时候,有个需求是按背景颜色
background-color要设透明度0.85,让背景图片
background-image透一点出来,而且
background-color的值是后端传过来的动态数据,背景颜色动态改变,UI同学给的数据全是6位HEX,需要我自己设置透明度。
设置透明度首先会想到用opacity,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,我需要子元素不透明,opacity就不能用了。
接下来讲两个实际可用性比较高的方法,以下两种方法都在chrome和微信小程序上亲测可用:
一、 6位HEX转RGBA
rgba的alpha值可以设透明度而不影响子元素。但是UI同学给的几百个数据都是6位hex,所以需要我自己手动把6位hex格式转成rgb格式,再加上alpha值0.85写成rgba(x, x, x, 0.85)。
其实hex转rgb就是十进制转十六进制,最简单的办法就是用JS原生的parseInt() 函数帮我们做转换。以下是MDN文档对parseInt的说明:
parseInt(string, radix) 将一个字符串 string 转换为 radix 进制的整数, radix 为介于2-36之间的数。
…
如果 radix 是 undefined、0或未指定的,JavaScript会假定以下情况:
如果输入的 string以 "0x"或 “0x”(一个0,后面是小写或大写的X)开头,那么radix被假定为16,字符串的其余部分被解析为十六进制数。
如果输入的 string以 “0”(0)开头, radix被假定为8(八进制)或10(十进制)。具体选择哪一个radix取决于实现。ECMAScript 5 澄清了应该使用 10 (十进制),但不是所有的浏览器都支持。因此,在使用 parseInt 时,一定要指定一个 radix。
如果输入的 string 以任何其他值开头, radix 是 10 (十进制)。
根据说明,我们有两种方式hex转rgb,可以parseInt(hex.slice(x, x+2), 16); 也可以parseInt('0x'+hex.slice(x, x+2))。最后再设置0-1或者百分数的alpha值,就顺利转好rgba了,以下是完整代码:
// 颜色格式 hex 转 rgba
const hexToRgba = (bgColor) => {
let color = bgColor.slice(1); // 去掉'#'号
let rgba = [
parseInt('0x'+color.slice(0, 2)),
parseInt('0x'+color.slice(2, 4)),
parseInt('0x'+color.slice(4, 6)),
0.85
];
return 'rgba(' + rgba.toString() + ')';
};
最后的Array.prototype.toString() 函数不带参数指定分隔号,会默认用逗号分隔,正好是我们想要的。
二、8位HEX
要不是这个需求,我还不知道CSS Color Module Level 4标准早在2014年就推出8位hex和4位hex来支持设置alpha值,以实现hex和rgba的互转。这个办法可比6位HEX转RGBA简洁多了,先来简单解释一下:
8位hex是在6位hex基础上加后两位来表示alpha值,00表示完全透明,ff表示完全不透明。
8 digits
The first 6 digits are interpreted identically to the 6-digit notation.
The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where ‘00’ represents a fully transparent color and ‘ff’ represent a fully opaque color.
In other words, #0000ffcc represents the same color as rgb(0 0 100% / 80%) (a slightly-transparent blue).
同理,4位hex是在3位hex基础上加后一位来表示alpha值,0表示完全透明,f表示完全不透明。
4 digits
This is a shorter variant of the 8-digit notation, “expanded” in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where 0 represents the minimum value and f represents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.
比如以下三种写法表示的是同个颜色:
.element {
background: rgba(0, 255, 0, 0.53);// rgba
background: #0f08;//4位hex
background: #00ff0088;//8位hex
}
以下是摘自文章8-Digit Hex Codes?的alpha值的十进制和十六进制对照表:
Alpha %
Hex
Rgb 255
100%
FF
255
95%
F2
242
90%
E6
230
85%
D9
217
80%
CC
204
75%
BF
191
70%
B3
179
65%
A6
166
60%
99
153
55%
8C
140
50%
80
128
45%
73
115
40%
66
102
35%
59
89
30%
4D
77
25%
40
64
20%
33
51
15%
26
38
10%
1A
26
5%
0D
13
0%
00
0
根据以上表,我在6位HEX后面加上字符串D9就能轻松搞定背景颜色设置透明度85%的需求了~
觉得有用的请点个赞,谢谢大家的观看~转载请带本文链接,谢谢!
html背景颜色透明度hex,CSS背景颜色设置透明度的两种方法(8位hex和rgba)相关推荐
- 用 CSS实现Bubble提示框的两种方法
第一种方法:主要是通过css border属性来实现,两个小三角形叠加,实现小箭头: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- CSS导入使用及引用的两种方法
方法一<link rel="stylesheet" type="text/css" href="test.css"> 方法二&l ...
- css实现图片自适应缩放的两种方法
想要实现图片根据给定宽高来自适应缩放的时候,会想到什么属性?是object-fit: cover;吗? 来试一试!为了展示效果,我特地选了对称的图片.下面两个img元素都有一个div包裹,div设置固 ...
- html怎么让页面没有滑动条,使用CSS实现无滚动条滚动的两种方法
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放 ...
- CSS多行文字垂直居中的两种方法
<div class="middle-box"><div class="middle-inner"><p><span ...
- elf格式转换为hex格式文件的两种方法
这周工作终于不太忙了,可以写点笔记总结一下了. 之前的文章如何在Keil-MDK开发环境生成Bin格式文件,介绍了如何在Keil开发环境使用fromelf软件,将生成的axf文件转换为bin文件,这次 ...
- elf格式转换为hex格式文件的两种方法 1
这周工作终于不太忙了,可以写点笔记总结一下了. 之前的文章如何在Keil-MDK开发环境生成Bin格式文件,介绍了如何在Keil开发环境使用fromelf软件,将生成的axf文件转换为bin文件,这次 ...
- php设置背景为透明,css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
最新文章
- mysql没有frm文件_【1.1】mysql frm文件丢失(ibd文件丢失)
- CentOS查看进程的线程数方法
- MyCat数据库分片
- jQuery之end()和pushStack()
- SpringMVC-Controller怎么直接在页面上传递参数
- idea-jvm参数设置(有注释)
- array.prototype.map()如何工作
- MVC - 建立模型/实体类,对应到数据库
- dd命令打包多个文件_linux下如何tar打包多个并列文件夹,如:将a文件夹 b文件夹 c文件夹,打包成d.tar文件...
- MII2RGMII IP核使用设计举例
- 群晖nas服务器的虚拟机,群晖NAS用于虚拟化的存储
- Cesium 编辑空间测量功能,任意修改
- 配置postfix邮件监控
- 关闭窗口提示以及窗口被关闭后执行函数
- java怎么求平方怎么求指数?
- 我的 sfml 学习笔记
- ffmpeg编解码格式
- Spark的RDD的弹性体现在什么地方?------面试题
- 什么是API网关, API 网关的作用
- 【vue-cli】使用es6的可选链?.操作符报错Module parse failed解决记录