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

CSS3を使用して画像のコントラストを調整する

CSSで画像のコントラストを設定するには、フィルターのコントラスト（％）を使用します。値0は画像を黒くし、100％は元の画像とデフォルトを表すことを忘れないでください。残りは、任意の値を設定できますが、100％を超える値を使用すると、画像のコントラストが高くなります。

例

CSS3で画像のコントラストを調整する例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%);
   filter: contrast(120%);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<p>Below image is brighter and has more contrast than the original image above.</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

出力

CSS3を使用して画像のコントラストを調整する


  1. OpenCV関数blur（）を使用して画像をぼかす

    このプログラムでは、opencv関数blur（）を使用して画像をぼかします。 アルゴリズム Step 1: Import OpenCV. Step 2: Import the image. Step 3: Set the kernel size. Step 4: Call the blur() function and pass the image and kernel size as parameters. Step 5: Display the results. 元の画像 サンプルコード import cv2 image = cv2.imread("testimage.jp

  2. Image Resizer を使用して画像形式を変更する方法

    デジタル画像は、手持ちのスナップショットとは異なり、さまざまな目的に使用できます。サイズ変更、トリミング、回転、サイズ変更、フォーマットの変更が可能です。ただし、これらすべてを実行するには、これらの雑用を支援できる画像編集ツールが必要です。もちろん、Adobe Photoshop を使って写真を作成することもできますが、これは使いにくいプログラムです。この記事では、基本的で使いやすいツールである Image Resizer を使用して、デジタル写真の形式を変更することに焦点を当てます。このツールを使用して、画像を他の形式に簡単に変換できます。 画像サイズ変更プログラムの機能 画像サイズ変更ツー