Фон или картинку на картинку CSS
Подскажите самый простой и кроссбраузерный вариант наложения фона или картинки на картинку. Нужно тупо затемнить. Гуглил — но там черт ногу сломит. Нужно что-то простое, а предлагают и текст засунуть, и иконки, и кучу всего. В идеале я бы сделал свой фон для наложения, но не знаю как впихнуть.
Отслеживать
задан 28 июл 2017 в 0:11
1,581 2 2 золотых знака 22 22 серебряных знака 42 42 бронзовых знака
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Для наложения картинок друг на друга нужно взять элементы и наложить их друг на друга (к примеру с помощью абсолютного позиционирования). Верхние элементы должны быть полупрозрачными.
Допустим есть 2 картинки:
body < /* необязательные стили для демонстрации */ margin: 0; >.image-overlapping < /* устанавливаем размеры контейнера */ width: 100vw; height: 100vh; background-image: url("https://i.stack.imgur.com/DqIv7.jpg"); /* делаем чтобы картинка полностью растягивалась, необязательный стиль */ background-size: 100% 100%; /* позиционирование относительно контейнера */ position: relative; >.image-overlapping:after < content: ""; /* абсолютное позиционирование */ position: absolute; /* растягиваем на всю ширину и высоту */ left: 0; right: 0; top: 0; bottom: 0; /* добавляем полупрозрачность */ opacity: 0.7; /* делаем чтобы полупрозрачный элемент располагался поверх основного блока */ z-index: 1; background-image: url("https://i.stack.imgur.com/bleHC.jpg"); /* делаем чтобы картинка полностью растягивалась, необязательный стиль */ background-size: 100% 100%; >Как наложить картинку на картинку в html
Для наложения картинки на картинку в HTML можно использовать абсолютное позиционирование. Для этого необходимо создать контейнер, который будет содержать обе картинки, и применить к этому контейнеру относительное позиционирование. Затем, для каждой картинки нужно задать абсолютное позиционирование и указать координаты ее расположения относительно родительского контейнера. Например:
class="container"> src="image1.jpg" class="image image1" /> src="image2.jpg" class="image image2" /> .container position: relative; > .image width: 300px; height: 200px; > .image1 position: absolute; top: 0; left: 0; > .image2 position: absolute; top: 0; left: 0; > В данном примере изображения с размерами 300×200 будут распологаться одна над другой.
Как адаптивно наложить картинку на картинку средствами CSS?
Подскажите пожалуйста как решить следующую проблему:
Есть основное фото 1.jpg мне нужно сверху этого изображения наложить другую картинку 2.png.
Вторая картинка, которая сверху должна позиционироваться не по центру а в определенном месте. Самая сложная для меня задача это совмещение должно быть адаптивным и при изменении размера экрана все должно сжиматься корректно не меняя своего позиционирования.
- Вопрос задан более трёх лет назад
- 13214 просмотров
Комментировать
Решения вопроса 1
Денис Букреев @denisbookreev
Попробуй картинке с футболкой это дать:
display: block; position: relative; width: 90%; /* это не важно */А поверх дай картинке вот такую бороду:
display: block; width: 30%; /* это наверное уже у тебя в js будет вычисляться */ position: absolute; top: 22%; left: 40%; /* тоже через js будешь вычислять */Ответ написан более трёх лет назад
Нравится 3 1 комментарий
Распишите пожалуйста подробнее(
Ответы на вопрос 1
Павел Радьков @paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Внутрь контейнера svg подгружайте две картинки, спрайт позиционируете относительно майки. Сам svg ведет себя как цельная картинка. Можете еще с эффектами наложения поэкспериментировать.
Ответ написан более трёх лет назад
Нравится 2 5 комментариев
Андрей Кривенко @ak-biznes Автор вопроса
Павел спасибо Вы предложили отличное решение моей проблемы — супер. Попробовал все отлично работает на любых разрешениях, ничего не плывет и не сьежает.
Андрей Кривенко @ak-biznes Автор вопроса
Павел подскажите пожалуйста из-за чего у меня изображения теряют в качестве? Мелкая елочка появляется. Я так подозреваю что нужно правильно выставить следующие значения?
viewBox=»0 0 1000 1000″
Не могли бы Вы подсказать за что отвечают эти значения? Это пиксели, проценты или какой то масштаб? Что это?
Заранее большое спасибо!
Павел Радьков @paulradzkov
Андрей Кривенко: Картинка майки в моем примере размером 1000×1000px, поэтому и viewBox=»0 0 1000 1000″ — размер полотна, в котором единицы измерения совпадают с пикселями. (x y width height)
А width=»100%» height=»100%» на элементе svg — это html-аттрибуты, такие же, как для img. Вы их можете убрать, переопределить через css и т.д.
Вам нужно во viewBox вписать размеры вашей картинки с майкой. Координаты x=»0″ y=»0″ — это точка монтирования — левый верхний угол картинки. Он совпадает с началом координат. height=»1000″ width=»1000″ — размеры картинки (в пикселях, но без указания единиц измерения). Для майки должны совпадать с viewBox.
Для наклейки на майку аналогично. Масштаб картинки с наклейкой должен быть не меньше, чем у майки. Т.е. не стоит наклейку растягивать больше, чем ее исходные пиксели.
Андрей Кривенко @ak-biznes Автор вопроса
Павел Радьков: Спасибо большое за такой развернутый ответ. Видимо svg не очень подходит для растровых картинок, все таки это под векторный формат изображений. При сжимании (а в адаптивной верстке без этого никуда) изображение из-за высокого количества точек на пиксель по краям становится елочкой(теряется качество отображения). Жаль наверное мне этот метод не подойдет, хотя все выравнивает и центрирует очень класно(((
Как наложить одну картинку на другую средствами html?
Здравствуйте! Подскажите как наложить одну картинку на другую средствами html? Например есть шапка (heder) сайта. В определенном месте надо наложит к примеру flash логотип или картинку с прозрачностью (например в png).. Рыл инет ничего путевого, либо криво отображается либо еще что то. Спасибо. P.S. Желательно конкретно объяснить.
Статьи о Форекс. Психологические аспекты.. (http://botagovo.ru/)
- eTarget 2011:Панельная дискуссия «Стратегия и планирование рекламной кампании в интернете»
- eTarget 2011: Круглый стол «Реклама в онлайн-видео»
- Могут ли «плохие» входящие ссылки привести к ухудшению ранжирования?
29 января 2011, 08:40
Это делается средствами css Смотрите в сторону position:absolute .