CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使って画像に視覚効果を追加する方法

CSSの filter プロパティを使うと、画像にさまざまな視覚効果を簡単に追加できます。色の反転（invert）をはじめ、グレースケール化、ぼかし、明度・コントラストの調整など、多彩なエフェクトを数行のコードで実現できます。

以下は、filter: invert(100%) を使って画像の色を反転させる例です。

実装例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
    margin: 20px;
}
img.normal{
    margin-left: 30%;
    width: 300px;
    height: 300px;
}
img.filter {
    width: 300px;
    height: 300px;
    filter: invert(100%);
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS Image effects example</h1>
<img class="normal" src="https://i.picsum.photos/id/237/536/354.jpg">
<img class="filter" src="https://i.picsum.photos/id/237/536/354.jpg">
</body>
</html>

出力結果

上記のコードを実行すると、同じ画像が2つ並んで表示され、右側の画像には invert(100%) の効果により色が反転して表示されます。

CSSを使って画像に視覚効果を追加する方法

主な filter 関数の一覧

filter プロパティでは、以下のような関数を組み合わせて使うことも可能です。

  • grayscale(100%) … 画像をモノクロ（グレースケール）にする
  • sepia(100%) … セピア調のレトロな雰囲気にする
  • blur(5px) … 画像をぼかす
  • brightness(150%) … 明るさを調整する
  • contrast(200%) … コントラストを強調する
  • saturate(200%) … 彩度を高くする
  • hue-rotate(90deg) … 色相を回転させる

複数の効果を同時に適用したい場合は、filter: grayscale(50%) blur(2px); のようにスペース区切りで指定できます。ホバー時だけ効果を変えるなど、:hover 疑似クラスと組み合わせれば、インタラクティブな演出も簡単に実装できます。

  1. CSSでホバー時にトランジション（アニメーション）を追加する方法を解説

    CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q

  2. CSSのobject-fitとobject-positionを使って画像を切り抜く方法

    CSSのobject-fitプロパティとobject-positionプロパティを組み合わせることで、要素内に表示する画像を切り抜いたり、表示位置を細かく調整したりできます。レスポンシブデザインにおいて、画像のアスペクト比を保ちながらレイアウトに収めたい場合に非常に便利な機能です。 基本構文 CSSのobject-fitプロパティおよびobject-positionプロパティの構文は以下の通りです。 Selector { object-fit: /*値*/; object-position: /*値*/; } object-fitの主な値 cover: アスペクト比を維持した