css текст на картинке

Question

У меня есть изображение, которое должно иметь полную ширину. И мне нужно положить текст и кнопку поверх него в определенном месте. Я просмотрел многие темы, но не могу понять, как сделать его полностью отзывчивым.

<div class"wrapper"> 
    <div class="image-box"> 
     <img src="x"> 
    </div> 
    <div class="content-box"> 
     <h1>text goes there</h1> 
     <a>anchor tag goes there</a> 
    </div> 
</div> 

так что это макет, но его можно изменить, если он доведёт меня до нужной мне точки.

Если я правильно понял, то родительский div, называемый оболочкой, должен быть установлен в положение: relative и все дочерние divs в позицию: absolute, после этого вы просто поместите все эти дочерние элементы сверху, слева, справа, внизу. Поэтому после тестирования это то, что я получаю. Так как изображение всегда 100% экрана просмотра, оно становится меньше и меньше по высоте и ширине из-за его соотношения сторон. Текст и кнопка на изображении просто остаются в фиксированном месте, и после некоторого момента он выходит из изображения.

Какая у меня ошибка?

P.S нашел много тем, но все же, я что-то путаю. Благодарим вас за понимание и помощь.

Answer 1

Тег изображения используется для создания отдельного элемента на странице. Это не действительно что вы хотите ... вы хотите, чтобы в контент-боксе был фон, не так ли? Вместо использования тега изображения используйте CSS для применения фонового изображения.

here is a jsfiddle

.content-box { 
 
    /* set width and height to match your image */ 
 
    /* if these are omitted, it will only be as big as your content, */ 
 
    /* and only show that much of your image */ 
 
    width: 200px; 
 
    height: 300px; 
 
    /* obviously, replace this with your image */ 
 
    background:url('http://placecage.com/200/300'); 
 
}

<div class"wrapper"> 
 
    <div class="content-box"> 
 
     <h1>text goes there</h1> 
 
     <a>anchor tag goes there</a> 
 
    </div> 
 
</div>

Answer 2

Я думаю, что это то, что вы хотите. Кроме того, это хороший повод, чтобы использовать эти теги HTML5 figure и figcaption, но в основном все, что вам нужно, это такая структура:

<div class="wrapper"> 
    <img /> 
    <div class="content-box"> 
     <!-- Your content here --> 
    </div> 
</div> 

Так что же происходит в том, что размеры ваших wrapper «S фиксируются изображение, а затем вы полностью позиционируете свой content-box или элементы внутри. Если вы не хотите, чтобы расположить их на самом верху или нижней части изображения, просто использовать процентные значения при позиционировании:

top: 10%; 

figure { 
 
    position: relative; 
 
} 
 

 
figure img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
figure figcaption { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    background: rgba(255,255,255,.7); 
 
    padding: 10px; 
 
}

<figure> 
 
    <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /> 
 
    <figcaption> 
 
    <h1>The image title</h1> 
 
    <p>This is the image caption</p> 
 
    </figcaption> 
 
</figure>