1. filter: drop-shadow() Установите тень изображения
<div class="img_box"><img /></div>
//стиль css
.img_box {
ширина: 53 пикселя;
высота: 53 пикселя;
переполнение: скрыто;
положение: родственник;
}
. картинка {
положение: абсолютное;
ширина: 53 пикселя;
высота: 53 пикселя;
фильтр: тень (70px 0 0 #EA5E30) // ключ
}
Режим наложения фона Two.background-blend-mode
.pic1 {
фоновое изображение: URL ($ img), линейный градиент (# f00, # f00);
фоновый режим наложения: осветлить;
размер фона: обложка;
}
Эффект следующий:
Эффекты градиента также могут быть достигнуты
.pic1 {
фоновое изображение: URL ($ img), линейный градиент (# f00, # 00f);
фоновый режим наложения: осветлить;
размер фона: обложка;
}
Эффект следующий:
Метод Two.svg
<svg t="1653466467217" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355" ширина ="200" высота="200"><путь d="xxx"></путь></svg>
<svg t="1653466467217" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355" ширина ="200" высота="200"><путь d="xxx"></путь></svg>
//стиль css
<стиль>
.icon2{
заполнить: #f61f41;
}
</стиль>
