Как добавить изображение на изображение?

Question

Елизавета @elizaveta_kotik

Как добавить изображение на изображение?

Поверх каждого блока нужно добавить такой блик :

сам код разметки

<div class="col-md-3 col-sm-4 col-xs-6 mini_post">
                    <img src="img/Italy.jpeg" class="img-responsive img_mini_post" alt="Responsive image">
                    <div class="mini_post_text">
                        Italy<br/>
                        <span class="mini_post_price">from $1,050</span>
                    </div>
                </div>

Можно ли это сделать с помощью css, может как-то наложить svg? или нужно в ручную каждое изображение в фотошопе обрабатывать?

Вопрос задан более трёх лет назад
195 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Елизавета @elizaveta_kotik Автор вопроса

так а адаптивность как будет сохраняться? и можно ли пожалуйста, по-подробней? я видела данную статью но не совсем поняла как применить

Написано более трёх лет назад

zRrr @zRrr

Елизавета: вот пример:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Порядок карт</title>
  <style type="text/css">
   .card IMG { position: relative; }
   .seven { left: -120px; top: 25px; }
   .ace { left: -240px; top: 50px; }
  </style>
 </head>
 <body>
  <p class="card">
   <img src="images/3.png" alt="3" class="three" />
   <img src="images/7.png" alt="7" class="seven" />
   <img src="images/ace.png" alt="Туз" class="ace" />
  </p>
 </body>
</html>

здесь видно, что для картинок устанавливается релативная позиция, и дальше для получения нужного расположения используют left и top:

.card IMG { position: relative; }
   .seven { left: -120px; top: 25px; }
   .ace { left: -240px; top: 50px; }

Адаптивность будет сохраняться, если указывать значения в процентах.
Про позиционирование здесь

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- 12 часов назад
- 46 просмотров
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- 16 часов назад
- 173 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 19 часов назад
- 104 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 20 часов назад
- 52 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- вчера
- 57 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- вчера
- 65 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 23 апр.
- 52 просмотра
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 23 апр.
- 39 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- 23 апр.
- 85 просмотров
2

ответа
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Devops для видео сервиса

26 апр. 2024, в 06:46

1500 руб./в час

Найти ошибку flutter_map

26 апр. 2024, в 05:31

1000 руб./за проект

Разработать электронику для весов с Wi-Fi

26 апр. 2024, в 01:22

1000 руб./в час

Answer 1 · 2017-07-20 14:34:26

<div class="col-md-3 col-sm-4 col-xs-6 mini_post">
    <!-- Бликовая картинка -->
    <img src="img/reflect_light.png" class="reflect_light">
    <!-- Обычная картинка -->
    <img src="img/Italy.jpeg" class="img-responsive img_mini_post" alt="Responsive image">
        <div class="mini_post_text">
            Italy<br>
            <span class="mini_post_price">from $1,050</span>
        </div>
</div>

.mini_post {
    position: relative;
}

.reflect_light {
    position: absolute;
}

Answer 2 · 2017-07-19 19:57:44

zRrr @zRrr

Вот

Ответ написан более трёх лет назад

2 комментария

Как добавить изображение на изображение?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт