16进制颜色码，设置透明度不兼容问题

Posted 2023-04-25

参考技术A 在做微信小程序过程中，遇到一个问题。ios系统的手机上，样式显示正确无误，但是android手机上样式有误。最后发现是因为如果用16进制表示颜色，并且设置了透明度，如#FFFFFFFF（后两位FF代表透明度1），在Android系统下不能被正确识别。

所以最后解决的办法就是采用rgb表示，如将#FFFFFFFF改写为rgb（255,255,255,1），在安卓系统下也能正确显示颜色了。

在寻求解决方法的时候还看到此类问题还出现在，谷歌浏览器能识别16进制颜色8位的这种形式，在其他浏览器上就不兼容，所以建议大家以后可以习惯使用rbg来表示颜色吧。

附：16进制-RBG在线转换网站  https://www.sioe.cn/yingyong/yanse-rgb-16/

CSS3颜色不透明度如何设置？

web前端技术包含HTML和CSS样式，两者是相辅相成的，学习CSS样式不必可少，那么在学习CSS样式中，CSS3颜色不透明度如何设置?在CSS3之前，我们设置颜色的方式包含十六进制颜色(如#F00)、rgb模式颜色、或指定颜色的英文名称(如red)，但这些方法无法改变颜色的不透明度。在CSS3中新增了两种设置颜色不透明度的方法，一种是使用rgba模式设置，另一种是使用opacity属性设置。下面将详细讲解两种设置方法。

1. rgba模式

rgba是CSS3新增的颜色模式，它是rgb颜色模式的延伸。rgba模式是在红、绿、蓝三原色的基础上添加了不透明度参数，其语法格式如下。

rgba(r,g,b,alpha);

上述语法格式中，前三个参数与RGB中的参数含义相同，括号里面书写的是rgb的颜色色值或者百分比，alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的数字。

例如，使用rgba模式为p标签指定透明度为0.5，颜色为红色的背景，代码如下。

p{background-color:rgba(255,0,0,0.5);}

或

p{background-color:rgba(100%,0%,0%,0.5);}

2. opacity属性

opacity属性是CSS3的新增属性，该属性能够使任何元素呈现出透明效果，作用范围要比rgba模式大得多。opacity属性的语法格式如下。

opacity：参数;

上述语法中，opacity属性用于定义标签的不透明度，参数表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。

CSS3颜色不透明度如何设置?以上就是小编的详细介绍，希望上面的介绍能够给大家带来帮助！

本文来自千锋教育，转载请注明出处。