合并十六进制和不透明度答案

【问题标题】：Merge hex and opacity合并十六进制和不透明度
【发布时间】：2021-04-12 15:48:55
【问题描述】：

我有如下CSS 类。我可以得到一个 hex 值而不是两者吗？换句话说，合并两者并返回hex 值。

.my-class{
   background-color: #50A2A7;
   opacity: 0.41;
}

【问题讨论】：

标签： html css sass ionic3

【解决方案1】：

您不能使用 HEX 值作为不透明度，您必须像这样切换到 RGBA：

background-color: rgba(80, 162, 167, 0.41);

【讨论】：

哦.. 太好了。我对opacity 有很大的问题。这是完美的解决方案。非常感谢:)
欢迎，您可以在这里了解更多信息：w3schools.com/css/css3_colors.asp
谢谢。你有没有使用任何工具将hex 转换为RGB？
这不是真的，new specs 现在允许十六进制格式包含不透明度通道：#RRGGBBAA 或 #RGBA，尽管目前只有 Firefox 支持。
我使用 chrome 控制台进行转换，但你可以试试这个链接：javascripter.net/faq/hextorgb.htm

【解决方案2】：

此组合的 HEX 值为 #B9D9DB。但是，如果改用这个值，当然不会有任何透明度。

【讨论】：

【解决方案3】：

您目前需要将十六进制值转换为 RGB 值，然后使用rgba()。要转换有许多基于 Web 的服务，您可以在 hex 和 rgb 之间进行转换，例如 this one。

获得 rgb 值后，您可以将 rgba() 与不透明度值一起使用。

.my-class{
  background-color: rgba(80, 162, 167, 0.41);
}

div {
  height: 50px;
  margin-bottom: 20px;
}

.class1 {
  background-color: #50A2A7;
  opacity: 0.41;
}

.class2 {
  background-color: rgba(80, 162, 167, 0.41);
}

<div class="class1"></div>
<div class="class2"></div>

【讨论】：

【解决方案4】：

@sampath 不能有一个类将 CSS 作为十六进制背景颜色并且在同一样式行中具有不透明度值你可以选择 rgba 风格的 background-color:rgba(80, 161, 165, 0.41) 和 hsla 风格的 background-color:hsla(183, 35%, 48%, 0.41)

【讨论】：

【解决方案5】：

您可以使用本网站。 Hexcolortool您可以找到您需要的颜色的完美不透明度。您必须使用导致第四个值的 RGBA，即不透明度

例如： rgba(80, 162, 167, 0.41)

不透明度： 41%

41%

body {
    background-color: rgba(80, 162, 167, 0.41);
}

100%

body {
  background-color: rgba(80, 162, 167, 1);
}

【讨论】：

【解决方案6】：

您现在可以使用 hexa 了：

.my-class2{
   background-color: #50A2A769;
}

(100 - 41 => 69)

【讨论】：