CSS에서 이미지 대비를 설정하는 방법: [filter:contrast(%)] 속성을 사용하여 [filter:contrast(0%)]와 같이 이미지의 대비를 설정할 수 있습니다. 필터 속성은 흐림, 채도, 대비 등과 같은 요소의 시각적 효과를 정의합니다.
속성 소개:
filter 속성은 요소(일반적으로 )의 시각적 효과(예: 흐림 및 채도)를 정의합니다.
(학습 영상 추천: css 영상 튜토리얼)
문법:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
contrast(%) 이미지의 대비를 조정합니다. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값은 100%이며 이미지는 변경되지 않습니다. 값은 100%를 초과할 수 있으며, 이는 더 낮은 비교가 사용된다는 의미입니다. 값이 설정되지 않은 경우 기본값은 1입니다.
예:
<!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>관련 권장 사항: CSS 튜토리얼
위 내용은 CSS에서 이미지의 대비를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
