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

CSS3を使用して画像の彩度を調整する

CSS3で画像を飽和させるには、フィルタープロパティの飽和プロパティ値を使用します。

例

画像の彩度を調整する例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: saturation(500%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

出力

CSS3を使用して画像の彩度を調整する


  1. CSS3線形および放射状グラデーションの使用

    グラデーションは、2つ以上の色の組み合わせを表示します。線形グラデーションは、2つ以上の色を上から下などの線形形式で配置するために使用されます。放射状のグラデーションが中央に表示されます。 以下は、CSS3での線形および放射状グラデーションの使用法を示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body{    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .linearGra

  2. Gimpを使用して画像のサイズを変更する方法

    この詳細でステップバイステップのガイドでは、フォトエディタGIMPを使用して画像ファイルのサイズを変更する方法を説明します。 このガイドで使用されているスクリーンショットはmacOSのGimpのものですが、WindowsまたはLinuxバージョンのGIMPを使用している場合は、インターフェイスがすべてのオペレーティングシステムでほぼ同じであるため、問題なくフォローできます。 Gimpを開いた状態で、ファイルを選択します 次に開く サイズを変更するファイルを選択して開きます。 画像を選択します トップメニューから、次に画像の拡大縮小 ドロップダウンリストから。 縮尺画像