Как разместить слитно два изображения друг под другом?
Добавить на страницу несколько изображений, чтобы они располагались рядом с друг другом по вертикали без зазоров.
Решение
Расположение изображений друг под другом часто продиктовано требованиями дизайна, когда необходимо «склеить» без швов несколько изображений в одну цельную картину. Обычно для переноса текста, а также изображений на другую строку применяется тег
или контейнер фиксированного размера, но в том и другом случае существуют свои особенности.
Для начала рассмотрим способ применения тега
, который отвечает за создание переноса. Этот тег достаточно добавить сразу же после первого тега , как показано в примере 1. Здесь, однако, кроется одна хитрость. При строгом режиме браузера (в HTML5 или при строгом в HTML4 или XHTML) между изображений возникает пустой промежуток, убрать который поможет свойство line-height , его следует указать для контейнера, в котором хранятся изображения, обычно это тег
или .
Пример 1. Использование тега
HTML5 CSS 2.1 IE Cr Op Sa Fx
Изображения по вертикали
Результат данного примера показан на рис. 1. Изображения располагаются внутри контейнера
и разделяются тегом
. Для состыковки изображений без пробелов в стилях указывается свойство line-height со значением 1px. Те же рисунки без состыковки показаны на рис. 2.
Рис. 1. Два изображения, состыкованные по вертикали
Рис. 2. Промежуток между изображениями
Кроме использования межстрочного расстояния, существуют и другие методы убрать промежуток между рисунками, например, использовать свойство vertical-align .
.img img
Можно обойтись и без тега
, поместив изображения в блок фиксированной ширины, значение которой совпадает с шириной рисунков. Перенос изображений друг под друга произойдет автоматически (пример 2).
Пример 2. Фиксированная ширина
HTML5 CSS 2.1 IE Cr Op Sa Fx
Изображения по вертикали
В браузере Internet Explorer 6 и 7 в результате выполнения данного примера возможно появление промежутка между изображениями. Известная ошибка этого браузера решается просто. Достаточно теги в коде примера записать в одну строку без пробелов и переносов.
Несколько фоновых картинок
К одному элементу можно добавить сразу несколько фоновых изображений через единственное свойство background . Это позволяет обойтись одним элементом для создания сложного фона или одной картинкой, выводя её несколько раз с различными настройками. Все изображения со своими параметрами перечисляются через запятую, при этом вначале указывается картинка которая выводится поверх остальных изображений, а последней, соответственно, самая нижняя картинка. В примере 1 показано создание фона с тремя изображениями.
Пример 1. Три фона
Если требуется отдельно задать какое-то стилевое свойство для фона, вроде background-size как в примере выше, то параметры для каждого фона перечисляются через запятую. Результат данного примера показан на рис. 1.
Рис. 1. Фон с тремя изображениями
Отдельные изображения для фона позволяют менять их положение, а также анимировать, как показано в примере 2.
Пример 2. Анимированный фон
Подробнее про анимацию рассказывается далее.
Рассмотрим теперь как применять одну картинку для создания блока с рамкой (рис. 2). Ширина блока фиксированная, а высота тянется в зависимости от объёма содержимого блока.
Рис. 2. Рисованная рамка
На рисунке хорошо заметна верхняя и нижняя часть, которую требуется вырезать в графическом редакторе и расположить по горизонтали. Средняя часть выбирается таким образом, чтобы она повторялась без швов по вертикали. Картинка имеет выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. В итоге получится такое подготовленное изображение (рис. 3). Клетчатое поле обозначает прозрачность, оно позволяет задавать наряду с изображениями цветной фон и легко менять его через стили.
Рис. 3. Подготовленное для фона изображение
Сам фон выводится свойством background , оно же задаёт и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую и в данном случае имеет значение их порядок. Нам требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставим их первыми (пример 3). Цвет фона указывается последним.
Пример 3. Несколько фоновых картинок
Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы. Последним идёт цвет, который виден в прозрачной центральной части блока (рис. 4).
Рис. 4. Вид рамки
См. также
- background
- background-size
- Анимация ссылок при наведении
- Линейный градиент
- Масштабирование фона
- Спрайты
- Установка фона и градиента
- Фоновая картинка
Как использовать несколько фоновых изображений с помощью CSS
CSS3 позволяет добавлять несколько фоновых изображений для одного элемента, используя список значений через запятые, чтобы указать необходимое количество фонов.
Список значений background-position и/или background-repeat, которые разделены через запятые, задают положение и повторение соответственно для нескольких фоновых изображений:
div < background-image:url(image1), url(image2), url(image3); background-position:center right, right bottom, center top; background-repeat:no-repeat, repeat-y, repeat-x; >
В данном примере image1 имеет положение center-right и не повторяется, image2 имеет положение right bottom и повторяется по вертикали, а image3 имеет положение center top и повторяется по горизонтали.
Это один из способов установления нескольких изображений. Можно установить изображение с помощью свойства background-image, потом указать положение изображения с помощью свойства background-position и указать повторение изображений с помощью свойства background-repeat.
Второй способ добавления нескольких изображений это использование свойства background:
div < background: url("image1") no-repeat center bottom, url("image2") no-repeat center top , blue; >
При применении свойства background-color для нескольких фоновых изображений цвет применяется в конце перед всеми фоновыми изображениями. Как видите в вышеприведенном пример, синий цвет указывается в конце.
Давайте узнаем, как можно пошагово создать несколько фоновых изображений с помощью CSS!
- Выберите три изображения. Они должны иметь небольшой размер, чтобы вы смогли увидеть, как работают свойства background-position и background-repeat.
- Создайте простой HTML документ с элементом .
- Примените стиль к элементу и не забудьте задать для него ширину и высоту.
А сейчас увидим результат!
Пример
html> html> head> title>Заголовок документа title> style> .example < width: 100%; height: 500px; background: url("http://www.cliparthut.com/clip-arts/26/vista-aero-pack2-transparent-png-icon-download-free-vector-clipart-M3rZlU.png") no-repeat 10% 110%, url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png") no-repeat 120% 700% , #002054; > style> head> body> div class="example"> div> body> html>
Рассмотрим другой пример:
Пример
html> html> head> title>Заголовок документа title> style> #example< margin:0; padding:0; position: absolute; top: 0; left:0; bottom: 0; width: 100%; height: 70%; background-image: url("https://userscontent2.emaze.com/images/d56242ef-c20d-4350-9877-321cb4523328/7c5cdc4d9f6bf00f3fb279f51d7d23fc.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/239518/birds2.svg"), url("http://www.transparentpng.com/thumb/clouds/W5czgG-blue-clouds-png-icon.png"), linear-gradient(to bottom, rgba(255,255,255,0), 40%,rgba(255,255,255,1) 60%); background-size: 20%, 20%, 100%, 100%, 50px; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x,repeat; background-position: 5% 40%, 95% 60%, center bottom; > > style> head> body> div id="example"> div> body> html>
Как вставить несколько изображений html?
Привет! Я в недоумении, не понимаю как вставить несколько изображений, чтобы собрать картинку?
Вот фото макета, на нём 3 изображения: облака, горы, гора на которой стоит человек.
Каким образом мне их вставить в HTML и сделать как по макету?
Вот ссылочка на codepen, правда не знаю зачем.
- Вопрос задан более года назад
- 157 просмотров
2 комментария
Простой 2 комментария
position: absolute и соответствующие значения top и left
Ankhena @Ankhena Куратор тега CSS
Объясните, пожалуйста, зачем делать их тремя изображениями?
Они как-то по-разному ведут себя при адаптиве?
Но если что, множественные фоны пишутся просто через запятую. Верхний первый, последний нижний, между ними соответственно.
Решения вопроса 0
Ответы на вопрос 1
Frontend-developer
Чтобы 3 изображения вставить, вам надо их позиционировать абсолютом.
Но надо ли? Не проще ли взять из макета уже целое изображение? В фигме это делается на 1-2-3
Ответ написан более года назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 3 часа назад
- 26 просмотров