不透明な画像の上に背景色があります

Question

透明な（または不透明な）背景画像とともに背景色を使用したいと思います。これは可能ですか？

私はdivコマンドを使用しようとしましたが、これは間違っている可能性があります。私が見ることができる唯一の不透明度のコマンドはCSSですが、これはボディコンテンツではなく背景イメージにどのようにリンクしていますか？

Answer 1

多分これが（実行スニペットが見て）あなたが探しているものです。

.stack{ 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: #ddd; 
 
    position:relative; 
 
} 
 

 
.layer { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: url('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png'); 
 
} 
 

 
.base{ 
 
    filter: opacity(.3); 
 
    -webkit-filter: opacity(.3); 
 
} 
 

 
.offset{ 
 
    margin-top: 20px; 
 
}

<div class="stack"> 
 
    <div class="layer base"> 
 
    </div> 
 
    <div class="layer offset"> 
 
    </div> 
 
</div>

次の2つがあることを確認するためにのために、私はトップ層に余白を追加しました層1（基部）は他方の下にある。マージンを取り除くと、画像が完全に整列しているはずです。