Question

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

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

Answer 1

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

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

Answer 2

此组合的HEX值为＃B9D9DB。但是，通过使用此值，当然不会有任何透明度。

Answer 3

您当前需要将十六进制值转换为RGB值，然后使用rgba()。要进行转换，您可以在hex和rgb之间转换许多基于Web的服务，例如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>

Answer 4

@sampath 不能有一个类将css作为背景颜色（十六进制）并且在同一样式行中具有不透明度值你可以去rgba风格的背景颜色：rgba（80,161,165,0.41）和hsla风格背景颜色：hsla（183,35％，48％，0.41）

Answer 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);
}

Answer 6

您现在可以使用 hexa 了：

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

(100 - 41 => 69)

合并十六进制和不透明度

6 个答案: