У меня есть слайдер домашней страницы на веб-сайте, который, очевидно, также должен быть мобильным. Я использую Bootstrap 3 в качестве основы. На рабочем столе слайдер должен выглядеть следующим образом:
Изображение - фоновое изображение слайдера.
Блок содержимого 1 - это полупрозрачное поле содержимого с текстом над изображением.
Блок контента 2 аналогичен блоку контента 1 и находится внизу изображения , но все еще над изображением.
Блок основного контента - остальная часть контента страниц сайта.
На мобильном устройстве это должно выглядеть следующим образом.
Изображение - фоновое изображение слайдера.
Блок контента 1 - это полупрозрачный блок контента с текстом , но под изображением.
Блок контента 2 аналогичен блоку контента 1 и находится ниже Блок контента 1 .
Блок основного контента - остальная часть контента страниц сайта.
На мобильных устройствах это работает, поскольку блоки контента располагаются ниже / относительно изображения. Но на рабочем столе они также размещены под изображением.
Я делаю на полях: -50% на рабочем столе Блок контента 1 , и он перемещает блок контента вверх, но изображение также масштабируется (уменьшается) с тем же%.
Мой CSS.
.carousel-header-container { /* Content block 1 */
position: relative;
width: 40%;
height: auto;
top: 0%;
left: 10%;
background-color: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.carousel-content-row { /* Content block 2 */
position: relative;
width: 100%;
height: 8em;
}
@media only screen and (max-width: 768px) {
.carousel-header-container { /* Content block 1 */
position: relative;
width: 100%;
height: auto;
top: 0%;
left: 0%;
overflow: hidden;
}
.carousel-content-row { /* Content block 2 */
position: relative;
width: 100%;
height: 5em;
}
}
И HTML.
<div class="item">
<img src="/images/myimage.jpg" style="width:100%; height: 100%">
<div class="carousel-header-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean euismod bibendum laoreet...<br>
</p>
</div>
<div class="carousel-content-row">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean euismod bibendum laoreet...<br>
</p>
</div>
</div>
<div>
This is the rest of the page content.
</div>