CSS에서 배경 이미지 회색조를 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 배경 이미지 회색조를 설정하는 방법

王林

풀어 주다： 2023-01-03 09:27:37

원래의

5900명이 탐색했습니다.

CSS에서 배경 이미지의 회색조 설정 방법: 필터 속성을 사용하여 필터를 설정할 수 있습니다. 예를 들어 [filter:grayscale(100%)]과 같이 이미지가 완전히 회색조 이미지로 변환된다는 의미입니다.

CSS에서 배경 이미지 회색조를 설정하는 방법

이 기사의 운영 환경: 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 :

CSS에서 배경 이미지 회색조를 설정하는 방법 예제 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>

로그인 후 복사

실행 결과 :

CSS에서 배경 이미지 회색조를 설정하는 방법 (학습 비디오 공유 :

CSS 비디오). 튜토리얼

)예 3:

<!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에서 배경 이미지 회색조를 설정하는 방법 관련 권장 사항: