Прозрачная коробка над изображением

Question

Хорошо, поэтому я пытаюсь создать основной надпись над изображением, но кажется, что я делаю что-то неправильно, вместо того, чтобы быть шириной и высотой 100% от 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

вы должны добавить к вашему position: relative;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

Это потому, что позиция: абсолютная имеет сверху, справа, снизу, слева значение 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; 
} 

Вы можете временно установить цвет фона для него, так что вы можете получить хорошее представление о том, где он находится на вашей странице. Затем отрегулируйте свои поля соответственно.