CSS의 필터 속성과 밝기() 함수를 사용하면 낮은 밝기 표시를 얻을 수 있습니다. 필터 속성은 밝기() 함수와 함께 사용하여 밝고 어두움을 설정합니다. 요소의 스타일. 구문 "요소 {필터:밝기"(밝은 값과 어두운 값)}".
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 낮은 밝기를 달성하는 방법
Css에서 낮은 밝기를 달성하려면 필터 속성을 사용할 수 있습니다.
filter 속성은 요소(일반적으로 )의 시각적 효과(예: 흐림 및 채도)를 정의합니다.
brightness() 함수는 이미지에 선형 곱셈을 적용하여 이미지를 더 밝게 또는 더 어둡게 만듭니다. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값이 100%이면 이미지에 변화가 없습니다. 다른 값은 선형 승수 효과에 해당합니다. 100% 이상의 값이면 괜찮고 이미지가 이전보다 밝아집니다. 값이 설정되지 않은 경우 기본값은 1입니다.
예제는 다음과 같습니다.
<html>
<head>
<style>
.img1{
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}
</style>
</head>
<body>
<p>左面低亮度，右面原亮度:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%" class="img1">
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
</body>
</html>출력 결과: 
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3에서 낮은 밝기 표시를 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
