子要素に影響を与えずにdivクラス内の背景画像を変更する方法

ボタンの画像を透明にしてホバーで、タイトル「子供」に影響を与えずに背景色を変更する方法。子要素に影響を与えずにdivクラス内の背景画像を変更する方法

画像ボックスにカーソルを合わせると、画像も影響を受け、余分な透明レイヤーが発生します。

.kids { 
 
    background-image: url(/kids_image.jpg); 
 
} 
 

 
div.kids :hover { 
 
    background-color: rgba(0, 0, 0, 0.3) 
 
}

<div class="kids"> 
 
    <a href="http://sampleurl.com"> 
 
     <div class="grid960"> 
 
      <h1>Kids</h1> 
 
    </div> 
 
    </a> 
 
</div>

2017-02-21 Gen

'div.kids：hover'を使用してください。（スペースを取る）。あなたは '.kids'の背景画像を望みますか？直接の子に（そしてその直属の子にのみ）欲しい場合は、 'div.kids> *：hover'を使います。 –

おそらく、h1の背景をハードコードする必要があります。たとえば、 'h1 {background-color：white;}'のようにします。 –

JPEG画像は、透明性を持っているので、あなたがあなたの例で見ていると、:hoverにbackground-colorセットをカバーする、唯一の画像です。ありません

編集アプリケーションで画像を開いたり、背景を削除したり、透過性のあるPNGとして再保存する必要があります。交互に背景色を焼き付けて2番目のイメージを作成することもできます。

2017-02-21 20:57:28 Gwellin

答えて