Итак, часто существует необходимость наложения изображений, например, товарных позиций, на серый фон. При этом мы имеем белый фон, что часто не вяжется с дизайном страницы. Картинка для понимания вопроса:
Существуют ли вообще способы наложения на серый фон по аналогии с background-blend-mode: multiply?
Кусочек HTML с внешним видом, чтоб не было попыток просто продублировать то, что на картинке выше:
body {
margin: 0;
padding: 0;
background: #f6f6f6;
text-align: center;
}
img {
max-width: 240px;
margin: 60px;
}
Ответ
На текущий момент, самым простым и банальным способом решения вопроса стало перекрытие изображения прозрачным фоном:
body {
margin: 0;
padding: 0;
background: #f6f6f6;
text-align: center;
}
img {
max-width: 240px;
margin: 60px;
}
div {
position: absolute;
width: 120px;
height: 240px;
background: rgba(30, 30, 30, .04);
left: 50%;
top: 60px;
}
В этом случае, поигравшись со значениями, я полностью достигнул нужного результата, без потери контраста и сложных "костылей". Сфера применения может быть самой разнообразной. Если никто не придумает что-то лучше, буду рад принять как правильный ответ.
Комментариев нет:
Отправить комментарий