Фон или картинку на картинку CSS
Подскажите самый простой и кроссбраузерный вариант наложения фона или картинки на картинку. Нужно тупо затемнить.
Гуглил — но там черт ногу сломит. Нужно что-то простое, а предлагают и текст засунуть, и иконки, и кучу всего.
В идеале я бы сделал свой фон для наложения, но не знаю как впихнуть.
Для наложения картинок друг на друга нужно взять элементы и наложить их друг на друга (к примеру с помощью абсолютного позиционирования). Верхние элементы должны быть полупрозрачными.
Допустим есть 2 картинки:
Здесь для наглядности сделал градиент. Если вы не знали то в css можно перечислять свойства так свойство: значение , значение2 т.е. через запятые. первое значение самое высокое, затем второе оно выше третьего и.т.д.
Как адаптивно наложить картинку на картинку средствами CSS?
Подскажите пожалуйста как решить следующую проблему:
Есть основное фото 1.jpg мне нужно сверху этого изображения наложить другую картинку 2.png.
Вторая картинка, которая сверху должна позиционироваться не по центру а в определенном месте. Самая сложная для меня задача это совмещение должно быть адаптивным и при изменении размера экрана все должно сжиматься корректно не меняя своего позиционирования.
- Вопрос задан более трёх лет назад
- 11536 просмотров
- Вконтакте
Попробуй картинке с футболкой это дать:
А поверх дай картинке вот такую бороду:
- Вконтакте
Внутрь контейнера svg подгружайте две картинки, спрайт позиционируете относительно майки. Сам svg ведет себя как цельная картинка. Можете еще с эффектами наложения поэкспериментировать.
- Вконтакте
Андрей Кривенко: Картинка майки в моем примере размером 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.
Для наклейки на майку аналогично. Масштаб картинки с наклейкой должен быть не меньше, чем у майки. Т.е. не стоит наклейку растягивать больше, чем ее исходные пиксели.
Как наложить одну картинку на другую средствами html?
Здравствуйте! Подскажите как наложить одну картинку на другую средствами html? Например есть шапка (heder) сайта. В определенном месте надо наложит к примеру flash логотип или картинку с прозрачностью (например в png)..
Рыл инет ничего путевого, либо криво отображается либо еще что то.
P.S. Желательно конкретно объяснить.
Это делается средствами css Смотрите в сторону position:absolute .
Как наложить две картинки на другую с помощью HTML-CSS?
Я искал несколько часов и не нашел решения своей проблемы.
Я хотел бы наложить две картинки на другую, несмотря на десятки руководств по этому поводу, я не собираюсь применять их в моем случае.
Я смог увидеть эти уроки, CSS имеет атрибут «z-index», который позволяет использовать фоновые изображения. Я также мог видеть свойство абсолютного и относительного положения, но я не уверен, что решение моей проблемы связано с этими свойствами.
Вот часть кода, в которой я хотел бы решить мою проблему:
Вот мой полный html-код:
Спасибо заранее за вашу помощь.
3 ответа
Если вы хотите наложить изображение поверх другого, вам просто нужно сделать так, чтобы второе изображение имело абсолютную позицию, а с помощью z-index определяло, какое из них будет наверху, например:
Вам нужно сначала создать элемент, который будет содержать ваши изображения. Например, это может быть div .
Этот элемент должен иметь position: relative . Поместите туда свои изображения с помощью position: absolute и установите top: 0; left:0 .
Затем вам нужно будет указать z-index , чтобы отображать одно поверх другого.
Таким образом, у вас будет что-то вроде:
И в вашем css, например:
Возможно, вы захотите использовать другие свойства, такие как width, height, overflow, display , чтобы получить желаемый результат.
Это очень распространенная вещь в HTML, и вам следует убедиться, что вы понимаете ее концепции (позиционирование и наследование css), поскольку это будет очень важно в дальнейшем.
На самом деле эти свойства — именно то, что вам нужно. Вот как их использовать. Допустим, у ваших изображений есть класс .overlay-img . Поместите их в контейнер с классом .img-container .
Теперь изображения должны быть друг над другом. Используя свойство z-index , вы также можете указать, какой из них находится наверху. Чем выше значение, которое вы укажете, тем выше будет отображаться элемент.
Поскольку ваш контейнер позиционируется относительно, все его дочерние элементы с абсолютным положением будут расположены относительно него, а не всей страницы.