CSS에서 배경 이미지 회색조를 설정하는 방법
- 王林원래의
- 2021-03-04 14:31:215847검색
CSS에서 배경 이미지의 회색조 설정 방법: 필터 속성을 사용하여 필터를 설정할 수 있습니다. 예를 들어 [filter:grayscale(100%)]과 같이 이미지가 완전히 회색조 이미지로 변환된다는 의미입니다.
이 기사의 운영 환경: windows10 시스템, CSS 3, thinkpad t480 컴퓨터.
CSS에는 흐림, 채도, 회색조 등과 같은 요소(일반적으로 img)의 시각적 효과를 정의하는 필터 속성 필터가 있습니다.
속성 구문:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
공통 속성 값:
none 기본값, 효과 없음.
blur(px) 이미지에 가우시안 블러를 설정합니다. "반지름" 값은 가우스 함수의 표준 편차 또는 화면에서 얼마나 많은 픽셀이 혼합되는지를 설정하므로 값이 클수록 더 흐릿해집니다. 설정된 값이 없으면 이 매개변수는 0입니다. CSS 길이 값을 설정할 수 있지만 백분율 값은 허용되지 않습니다.
밝기(%)는 이미지에 선형 곱셈을 적용하여 더 밝게 또는 더 어둡게 표시합니다. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값이 100%이면 이미지에 변화가 없습니다. 다른 값은 선형 승수 효과에 해당합니다. 100% 이상의 값이면 괜찮고 이미지가 이전보다 밝아집니다. 값이 설정되지 않은 경우 기본값은 1입니다.
contrast(%) 이미지의 대비를 조정합니다. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값은 100%이고 이미지는 변경되지 않습니다. 값은 100%를 초과할 수 있으며, 이는 더 낮은 비교가 사용된다는 의미입니다. 값이 설정되지 않은 경우 기본값은 1입니다.
grayscale(%)
이미지를 회색조로 변환합니다. 값은 변환 규모를 정의합니다. 값이 100%이면 이미지가 완전히 흑백으로 변환되고, 값이 0%이면 이미지가 변하지 않습니다. 0%에서 100% 사이의 값은 효과의 선형 승수입니다. 설정하지 않으면 값 기본값이 0으로 켜집니다.
예제 1 :
예제 2 :
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
</style>
</head>
<body>
<p>图片转为黑白色:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
</body>
</html>실행 결과 :
(학습 비디오 공유 :
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
</style>
</head>
<body>
<p>图片使用高斯模糊效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
</body>
</html>실행 결과:
관련 권장 사항:
위 내용은 CSS에서 배경 이미지 회색조를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!