私は、次のHTMLコードを持っている

Question

画像の上に黒の背景に画像の輝きをしてみましょう：

.header-container { 
 
     position: relative; 
 
    } 
 
    
 
    .header-container img { 
 
     -webkit-filter: grayscale(100%) contrast(300%); 
 
     filter: grayscale(100%) contrast(300%); 
 
    } 
 
    
 
    .header-container .after { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     color: white; 
 
     background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/ITunes_12.2_logo.png/600px-ITunes_12.2_logo.png"); 
 
     background-repeat: no-repeat; 
 
     background-position: center; 
 
     background-size: contain; 
 
    } 
 
    
 
    .header-container:hover .after { 
 
     -webkit-filter: drop-shadow(0px 0px 10px #ff5f00); 
 
     filter: drop-shadow(0px 0px 10px #ff5f00); 
 
    }

<div class="header-container"> 
 
     <span class="image fit"><img src="http://images.wookmark.com/167422_battlefield-dinosaur-facebook-timeline-cover-facebook-banner.jpg" alt="" /></span> 
 
     <div class="after">This is crazy</div> 
 
    </div>

私はロゴ画像の周りの輝きを持っていると思いますが（作品） 。残念ながら、私はこのような黒い背景とヘッダー画像をカバーすることはできません：私はこれを行うと

background: rgba(0, 0, 0, 0.8); 

を、全体のヘッダ領域は、黒とロゴ画像だけではなくなります。ヘッダー画像の上に黒い背景がある場合、どのようにロゴ画像を輝かせることができますか？私は、あなたが私の問題を理解できることを願っています。

Answer 1

イメージが輝くようにするには、フォトショップにグローを追加する必要があります。また、ロゴをテキストとして追加し、希望の輝きの色でtext-shadow:1px 1px 10px rgba(0,0,0,0.3);を追加することもできます。