画像上の透明なボックス

Question

画像の上に基本的なオーバーレイをしようとしていますが、IMGの幅と高さが100％でなく、何か間違っているようですページ全体

HTML

<div id="main_BodyNews"> 
       <img src="img/main.png" alt="mainNews" /> 
       <div class="overflow-box"></div> 
    </div> 

そしてCSS

#main_BodyNews { 
    width: 50%; 
    height: 300px; 
    background-color: #F2C68C; 
    margin-top: 50px; 
    margin-left: 20px; 
    float: left; 
    border-radius: 5px; 
    border: 1px solid #F2C68C; 
} 

#main_BodyNews img { 
    width: 100%; 
    height: 100%; 
    border-radius: 5px; 
    background-color: 1px solid #F2C68C; 
    position: relative; 
} 

.overflow-box { 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    right: 0px; 
    background-color:rgba(255,255,0,0.5); 
    width: 100%; 
    height: 100%; 
} 

JSフィドル：https://jsfiddle.net/0utbjwo0/

Answer 1

あなたが位置ためですあなたのabsolute親のdiv

#main_BodyNews{ 
    position: relative; 
} 

#main_BodyNews { 
 
\t width: 50%; 
 
\t height: 300px; 
 
\t background-color: #F2C68C; 
 
\t margin-top: 50px; 
 
\t margin-left: 20px; 
 
\t float: left; 
 
\t border-radius: 5px; 
 
\t border: 1px solid #F2C68C; 
 
    
 
    position: relative; 
 
} 
 

 
#main_BodyNews img { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t border-radius: 5px; 
 
\t background-color: 1px solid #F2C68C; 
 
\t position: relative; 
 
} 
 

 
.overflow-box { 
 
\t position:absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    background-color:rgba(255,255,0,0.5); 
 
}

<div id="main_BodyNews"> 
 
\t \t \t \t <img src="img/main.png" alt="mainNews" /> 
 
\t \t \t \t <div class="overflow-box"></div> 
 
\t \t \t </div>

Answer 2

にposition: relative;を追加する必要があります。絶対にトップ持って、あなたが必要としない0の右、下、左の値高さと幅を指定します。親サイズでサイズを変更するには親要素の相対位置が必要です。

#main_BodyNews { 
 
    width: 50%; 
 
    height: 300px; 
 
    background-color: #F2C68C; 
 
    margin-top: 50px; 
 
    margin-left: 20px; 
 
    float: left; 
 
    border-radius: 5px; 
 
    border: 1px solid #F2C68C; 
 
    position: relative; 
 
} 
 

 
#main_BodyNews img { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 5px; 
 
    background-color: 1px solid #F2C68C; 
 
    position: relative; 
 
} 
 

 
.overflow-box { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    background-color: rgba(255, 255, 0, 0.5); 
 
}

<div id="main_BodyNews"> 
 
    <img src="img/main.png" alt="mainNews" /> 
 
    <div class="overflow-box"></div> 
 
</div>

Answer 3

あなたは絶対に使用することができます。それはちょうどあなたが設定しているのです 幅：100％; 高さ：100％;

これを削除して、余​​白 - 余白 - 左と余白を設定します。画像の実際の大きさに合わせて幅と高さを設定できます。これを行うと、オーバーレイのdivをイメージdiv内に正確に保持する必要はありません。 私のサイトで作った例です。

#overlay { 
margin-top: 60px; 
margin-left: 88px; 
height: 30px; 
width: 85px; 
position: absolute; 
} 

一時的に背景色を設定して、ページ上のどこに配置されているかを知ることができます。それに応じて余白を調整します。