マージヘックスと不透明度

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

現在、16進値をRGB値に変換してからrgba()を使用する必要があります。変換するには、this oneのような16進数とrgbの間で変換できるいくつかのWebベースのサービスがあります。

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あなたは必要な色の完全な不透明度を見つけることができます。あなたは不透明に

例であるfouth値につながる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); 
 
}