1.filter:drop-shadow() 画像の影を設定します。
<div class="img_box"><img /></div>
//CSSスタイル
.img_box {
幅: 53ピクセル;
高さ: 53ピクセル;
オーバーフロー: 非表示;
位置: 相対的;
}
。画像 {
位置: 絶対;
幅: 53ピクセル;
高さ: 53ピクセル;
フィルタ:drop-shadow(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" width ="200" height="200"><パス d="xxx"></path></svg>
<svg t="1653466467217" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355" width ="200" height="200"><パス d="xxx"></path></svg>
//CSSスタイル
<スタイル>
.icon2{
塗りつぶし: #f61f41;
}
</スタイル>
