私のHTML（私は暗い画像と通常のテキストを取得したい）私は、画像やテキスト（画像上のテキスト）を有するいくつかのli要素を持っている、と私は画像の上に影を追加したいこんにちは

Question

をブロックするために

を日陰を追加

<li> 
    <div class="block-news-textoverlay text-center"> 
     <h2> 
      Lorem ipsum 
     </h2> 
     <p>Lorem ipsum dolor sit amet, consectetu</p> 
    </div> 
    <img src="1.jpg" alt=""> 
</li> 

マイCSS

.block-news-textoverlay { 
    transform: translateY(-50%); 
    text-align: center; 
    position: absolute; 
    z-index: 10; 
    right: 0; 
    top: 50%; 
    left: 0; 
    padding-left: 75px; 
    padding-right: 75px; 
} 

だから私はli要素

に "日陰" クラスでdiv要素を追加しよう

とCSS

.shade{ 
    background-image: linear-gradient(to bottom, transparent 0, #000000 130%); 
    background-repeat: repeat-x; 
} 

を使用しますが、それはここで

Answer 1

を動作しませんが、背景画像と擬似要素を使った例です。

.block-news-textoverlay { 
 
    transform: translateY(-50%); 
 
    text-align: center; 
 
    position: absolute; 
 
    z-index: 10; 
 
    right: 0; 
 
    top: 50%; 
 
    left: 0; 
 
    padding-left: 75px; 
 
    padding-right: 75px; 
 
    background: url(http://lorempixel.com/output/nature-q-c-800-800-6.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    color: #fff; 
 
} 
 
.block-news-textoverlay:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    z-index: -1; 
 
}

<li> 
 
    <div class="block-news-textoverlay text-center"> 
 
    <h2>Lorem ipsum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetu</p> 
 
    </div> 
 
</li>