Как я могу поместить изображение поверх другого изображения?

Question

Я видел несколько, которые объясняют, как это сделать с абсолютным положением. В настоящее время я создаю сайт Bootstrap 3, поэтому я не могу использовать абсолютный атрибут.

Ниже приведен краткий макет того, что я говорю о (обратите внимание, что кнопки воспроизведения не будет сожжено в изображении ниже)

Кроме того, если вы могли бы объяснить, как чтобы сделать подобный градиент, было бы хорошо.

Я попытался использовать атрибут z-index, но при его использовании я не мог понять, как позиционировать элементы относительно элементов с более низкими z-индексами.

Редактировать: Кнопка воспроизведения (отображается поверх изображений) не будет частью объекта изображения jpg. Скорее, это будет собственный ресурс svg, помещенный поверх изображения jpg (миниатюр). Я выбираю так, чтобы я мог анимировать «play-button» самостоятельно.

Не будет также градиентом, заголовком, субтитрами или «тегом статьи» частью ресурса уменьшенного изображения.

Красный «разделитель» будет своим собственным активом svg.

В идеале, я хотел был бы иметь возможность разместить <img></img> объекты поверх другого <img></img> ограничительная коробка и иметь возможность перемещать ее относительно ограничивающей рамки. например x = 50% y = 50% для центрирования. Метод должен быть масштабируемым, чтобы я мог иметь более двух слоев, а также иметь несколько объектов на одном уровне.

Примечание: миниатюрные изображения будут сохранены на веб-сервере с разрешением 1920x1080. При попытке использовать «разделитель» в качестве фонового рисунка у меня был вопрос подрезки:

Это не расширит свой родитель <div>. (также, есть ли способ определить размер экрана пользователя и масштабировать изображения соответственно (на сервере), чтобы увеличить скорость загрузки? Как печенье или что-то в этом роде?)

Извините, что, вероятно, нарушил тон правил на сайте это мой первый вопрос.

Answer 1

относительно градиента, короткий CSS письма будет:

background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%); 

Кроме того: я создал JSFiddle для вас для :) Оформление печатных

HTML:

<div class="relative-container"> 
    <div class="absolute-container"> 
    <div class="flex-1"> 
    Img 1 
    </div> 
    <div class="flex-1"> 
    Img 2 
    </div> 
    <div class="flex-1"> 
    Img 3 
    </div> 
    </div> 
</div> 

CSS:

.relative-container{ 
    width:300px; 
    height:200px; 
    background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%); 
} 

.absolute-container{ 
    width:300px; 
    height:100px; 
    display:flex; 
    align-items: center; 
    position:absolute; 
    top:55px; 
} 

.flex-1{ 
    flex:1; 
    border:1px dashed black; 
    text-align:center; 
}