CSS3에서 낮은 밝기 표시를 달성하는 방법-CSS 튜토리얼-php.cn

CSS3에서 낮은 밝기 표시를 달성하는 방법

WBOY

풀어 주다： 2021-12-15 17:36:03

원래의

3020명이 탐색했습니다.

CSS의 필터 속성과 밝기() 함수를 사용하면 낮은 밝기 표시를 얻을 수 있습니다. 필터 속성은 밝기() 함수와 함께 사용하여 밝고 어두움을 설정합니다. 요소의 스타일. 구문 "요소 {필터:밝기"(밝은 값과 어두운 값)}".

CSS3에서 낮은 밝기 표시를 달성하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3에서 낮은 밝기를 달성하는 방법

Css에서 낮은 밝기를 달성하려면 필터 속성을 사용할 수 있습니다.

filter 속성은 요소(일반적으로 CSS3에서 낮은 밝기 표시를 달성하는 방법 )의 시각적 효과(예: 흐림 및 채도)를 정의합니다.

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>

로그인 후 복사

출력 결과:
CSS3에서 낮은 밝기 표시를 달성하는 방법