홈페이지>웹 디자인 튜토리얼>CSS 튜토리얼

CSS는 필터와 배경 필터를 사용하여 가우시안 흐림 효과를 얻습니다(샘플 코드)

저자：Eve Cole 업데이트 시간：2024-12-20 16:54:18

배경

오늘 페이지를 흐리게 하기 위해 가우시안 흐림 효과를 사용해 달라는 요청을 받았습니다. 저는 이번 기회에 CSS3의 가우시안 흐림의 두 가지 API를 정리했습니다.

API 소개

필터

설명하다:
이 API는 가우시안 블러뿐만 아니라 색상 오프셋, 채도, 회색조 등과 같은 다른 많은 기능도 구현할 수 있는 필터입니다.

문법:

 // 여러 필터를 구분하려면 공백을 사용하세요. filter: none;
//가우스 흐림 필터: Blur(4px);
//선형 밝기 필터: 밝기();
// 대비 필터: Contrast();
// 그림자 효과 필터: drop-shadow();
//회색조 필터: greyscale();
// 색조 회전 필터:hue-rotate();
//이미지 필터 반전: invert();
//투명도 변환 필터: opacity();
// 채도 필터: saturate();
// 갈색 필터: sepia();
// SVG 필터 필터: url();

그 중 가우시안 블러 filter: blur();

배경 필터

설명하다:
요소를 생성하고 이 속성을 추가하면 요소 뒤의 영역에 효과(예: 흐림 또는 색상 변화)가 추가됩니다.

차이:
filter 속성은 이미지나 배경 이미지에 로드되어야 하며, background-filter는 요소만 있으면 됩니다.

문법:

 배경 필터: 흐림(2px);
배경 필터: 밝기(60%);
배경 필터: 대비(40%);
배경 필터: drop-shadow(4px 4px 10px 파란색);
배경 필터: 회색조(30%);
배경 필터: 색조 회전(120deg);
배경 필터: 반전(70%);
배경 필터: 불투명도(20%);
배경 필터: 세피아(90%);
배경 필터: 포화(80%);

예

필터 예제 1

 <!DOCTYPE HTML>
<html lang="ko">
  <머리>
    <스타일>
      .wrapBox2 {
        너비: 800px;
        높이: 300px;
        오버플로: 숨김;
        위치: 상대;
        배경 이미지: url("./win.jpeg");
        배경 크기: 100% 100%;
        background-repeat: 반복하지 않음;
        필터: 흐림(10px);
      }
      .subBox {
        위치: 절대;
        너비: 계산(100% - 100px);
        높이: 계산(100% - 100px);
        Z-인덱스: 2;
      }
      .텍스트 {
        위치: 상대;
        /* z-인덱스: 10 */
        글꼴 크기: 40px;
        글꼴 두께: 굵게;
        색상: #f00;
      }
    </style>
  </head>
  <본문>
    <div 클래스="wrapBox2">
      <div class="subBox"></div>
      <div class="text">모두 흐리게</div>
    </div>
  </body>
</html>

여기서 주목해야 할 점은 블러를 추가한 후 주변 버 효과로 인해 실제 크기가 우리가 설정한 너비와 높이를 초과한다는 것입니다. 외부 레이어를 감싸고 overflow: hidden;

필터 예제 2

 <!DOCTYPE HTML>
<html lang="ko">
  <머리>
    <스타일>
      .wrapBox2 {
        너비: 800px;
        높이: 300px;
        /* 오버플로: 숨김 */
        위치: 상대;
      }
      .subBox {
        너비: 100%;
        높이: 100%;
        위치: 절대;
        너비: 계산(100% - 100px);
        높이: 계산(100% - 100px);
        Z-인덱스: 2;
        필터: 흐림(10px);
      }
      .텍스트 {
        위치: 상대;
        /* z-인덱스: 10 */
        글꼴 크기: 40px;
        글꼴 두께: 굵게;
        색상: #f00;
      }
    </style>
  </head>
  <본문>
    <div 클래스="wrapBox2">
      <img src="./win.jpeg" class="subBox" />
      <div class="text">모두 흐리게</div>
    </div>
  </body>
</html>

이러한 방식으로 텍스트와 그림이 동일한 수준에 있으므로 텍스트가 흐려지지 않고 그림 아래 또는 그림 위에 텍스트가 표시됩니다(z-index에 따라 제어됨).

배경 필터 예 1

 <!DOCTYPE HTML>
<html lang="ko">
  <머리>
    <스타일>
      .wrapBox2 {
        너비: 800px;
        높이: 300px;
        오버플로: 숨김;
        위치: 상대;
        배경 이미지: url("./win.jpeg");
        배경 크기: 100% 100%;
        background-repeat: 반복하지 않음;
      }
      .subBox {
        위치: 절대;
        너비: 계산(100% - 100px);
        높이: 계산(100% - 100px);
        Z-인덱스: 2;
        배경 필터: 흐림(10px);
        /* 상단: 100px */
      }
      .텍스트 {
        위치: 상대;
        /* z-인덱스: 10 */
        글꼴 크기: 40px;
        글꼴 두께: 굵게;
        색상: #f00;
      }
    </style>
  </head>
  <본문>
    <div 클래스="wrapBox2">
      <div class="subBox"></div>
      <div class="text">부분적으로 흐리게</div>
    </div>
  </body>
</html>

보시다시피, 그림 요소에는 background-filter 속성을 설정할 필요가 없지만, 모든 요소에 이 방법이 더 유연하다고 생각합니다.

요약

사진을 흐리게 하고 싶다면 필터를 직접 사용할 수 있습니다. HTML 페이지/이미지의 특정 부분을 흐림 레이어로 덮으려면 배경 필터를 사용하세요.

물론, background-filter를 사용하면 첫 번째 시나리오도 만족시킬 수 있습니다.

이것으로 필터와 배경 필터를 사용하여 가우시안 흐림 효과(샘플 코드)를 구현하는 CSS에 대한 기사를 마칩니다. 더 많은 관련 CSS 가우시안 흐림 콘텐츠를 보려면 downcodes.com에서 이전 기사를 검색하거나 아래에서 관련 기사를 계속 찾아보세요. 앞으로 downcodes.com을 더 많이 지원할 예정입니다!

관련 기사