ホームページ > 記事 > ウェブフロントエンド > CSSで画像のコントラストを設定する方法
CSSで画像のコントラストを設定する方法
- 王林オリジナル
- 2020-11-12 09:50:242471ブラウズ
CSS で画像のコントラストを設定する方法: [filter:contrast(%)] 属性を使用して、[filter:contrast(0%)] などの画像のコントラストを設定できます。フィルター属性は、ぼかし、彩度、コントラストなどの要素の視覚効果を定義します。
属性の紹介:
フィルター属性は、要素 (通常は (学習ビデオの推奨: css ビデオ チュートリアル) 構文: contrast(%) 画像のコントラストを調整します。値が 0% の場合、画像は完全に黒になります。値は 100% で、画像は変更されません。値は 100% を超える可能性があり、より低い比較が使用されることを意味します。値が設定されていない場合、デフォルトは 1 です。 例: 関連する推奨事項: CSS チュートリアル 以上がCSSで画像のコントラストを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img{
width: 200px;
}
.img1{
/*没有滤镜效果*/
/*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
-webkit-filter: none;
filter: none;
}
.img2{
/*调整元素的对比度*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: contrast(30);
filter: contrast(30);
}
</style>
</head>
<body>
<div class="demo">
<img src="1.jpg" class="img1"/>
<img src="1.jpg" class="img2"/>
</div>
</body>
</html>