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

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

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- 17 часов назад
- 63 просмотра
1

ответ
HTML

+3 ещё

Простой
Где и как найти переменные локальной игры на html5?
- 1 подписчик
- вчера
- 75 просмотров
1

ответ
HTML

+1 ещё

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

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 213 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 111 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 113 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 115 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 82 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 64 просмотра
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 65 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Сайт по продаже сертификатов по макетам figma

26 нояб. 2024, в 20:38

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

Сделать фичеринг для рустора

26 нояб. 2024, в 20:08

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

Доработать сайт на WP

26 нояб. 2024, в 19:10

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

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 комментария

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

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

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

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