Лучший способ плавать текст поверх изображения с различной шириной контейнера

109
10

Я перепроектирую сайт, а в разных разделах (заголовок, изображение баннера, основной и т.д.) есть фон, который растягивается полностью, однако содержимое содержит определенную ширину и это поле центрировано.


Однако в дизайне "изображение баннера" (изображение под заголовком, но выше основного содержимого) будет выходить за пределы остальной части содержимого. Сначала это было легко, пока не возникла необходимость иметь текст поверх изображения баннера, и этот текст должен был бы соответствовать остальной части текста.


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


У меня есть рабочее решение, но оно кажется неуклюжим, и я надеялся найти лучший метод: http://jsfiddle.net/PkStg/10/


HTML:


<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
<div class="banner-image-wrapper">
<img src="http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg" />
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>

CSS:


.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}

.banner-text-outer {
position: relative;
}
.banner-text-inner {
position: absolute;
top: 10px;
}

.banner-image-wrapper {
margin: 0 auto;
max-width: 400px;
min-width: 300px;
font-size: 0;
}
.banner-image-wrapper img {
width: 100%;
}

спросил(а) 2021-01-19T20:49:46+03:00 6 месяцев, 2 недели назад
1
Решение
64

Я знаю, что вы не хотели использовать фоновое изображение, но вот решение, которое использует это для всех, кто видит страницу.


Возможно, ваш слайдер может использовать фоновое изображение?


Это должно сделать это:
jsFiddle


HTML

<body>
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
</body>

CSS


.header, .banner, .main-content { width: 100%; }

.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}

.banner {
background: green url("http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg") no-repeat;
background-size: contain;
background-position: center;
min-height: 150px;
}

ответил(а) 2021-01-19T20:49:46+03:00 6 месяцев, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема