色を継承しますが、不透明度/透明度をオーバーライドします

Question

色を継承できますが、不透明度の値を上書きできますか？ここで擬似 CSSの例は次のとおり

.color-class { 
    background-color: rgba(255, 0, 0, 0); 
} 

.lighten { 
    background-color: rgba(inherit, inherit, inherit, .4); 
} 

着色要素と同じである他方をもたらすはずである

<div style="color-class">I am red</div> 
<div style="color-class lighten"> 
    I am red and a little bit transparent 
</div> 

に適用されるが、追加の透明性と色を（継承）。

基本的に、色の値を変更せずに背景色を明るくする（または暗くする）CSSクラスが必要です。

Answer 1

ソリューション背景として擬似要素を使って、単にその不透明度を制御することです：

div { 
 
    padding: 40px; 
 
} 
 

 
.color-class { 
 
    position: relative; 
 
} 
 

 
.color-class:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: rgb(255, 0, 0); 
 
    opacity: 1; 
 
    z-index:-1; 
 
} 
 

 
.lighten:before { 
 
    opacity: 0.5; 
 
}

<div class="color-class">I am red</div> 
 
<div class="color-class lighten"> 
 
    I am red and a little bit transparent 
 
</div>

Answer 2

まず、これでしょうない仕事継承が要素親要素ないその兄弟要素から値を取るので。参照：https://developer.mozilla.org/en-US/docs/Web/CSS/inherit

第2に、inheritキーワードはプロパティ値です。関数自体はプロパティ値であるため、ブラウザ関数（rgba）の引数として使用することはできません。

また、継承と再利用性を強化するためにこれを厳重に試す必要はありません。コードを膨らませて、過剰に設計してしまうことがよくあります。

あなたは理想的には、設定された配色を持っているため、これを再利用することを考えれば、明るい色の固定カラーを選択することができます。

この機能が本当に必要な場合は、この継承を模倣するためにSASS/SCSSミックスインを使用したい場合は、JavaScriptを使用することもできますが、これを実現しようとしているものは、効率的。