CSS3의 필터 속성 소개-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3의 필터 속성 소개

不言

Jul 02, 2018 am 10:11 AM

css3 filter

이 글은 CSS3의 강력한 필터(filter) 속성에 대한 관련 정보를 주로 소개합니다. 필요한 친구들은

블로거가 최근 웹사이트를 구축하는 과정에서 발견한 사실을 참고하세요. 매우 강력한 CSS3 속성은 필터 속성입니다. p-그림을 좋아하는 친구는 이름을 보고 이것이 어떤 종류의 인공물인지 알아야 합니다. 물론 이 속성의 효과는 PS와 비교할 수는 없지만, 잘 활용하면 공간을 많이 절약하면서 한 장의 사진을 두 장의 효과로 만들 수 있다.

1. 정의　

filter는 문자 그대로 필터를 의미하며, 필터 속성의 공식 정의는 시각적인 것을 정의합니다. 요소(일반적으로 )의 효과(예:

<style>
    img{
　　　　　　/*灰度100%*/
        -webkit-filter:grayscale(100%);
    }
</style>
<img src="img/boke.png" alt="">

로그인 후 복사

# 🎜🎜##🎜🎜 #　　　 이 효과를 보고 블로거들은 필터에 관심을 갖기 시작한 걸까요?

속성 선택적인 값이 많이 있는데, 그게 무슨 뜻인가요?

#🎜🎜 #
saturate채도
hue-rotate색상 회전
#🎜 🎜#색상 반전# 🎜🎜#
불투명도
밝기
# 🎜🎜## 🎜🎜#contrast대비
blur #
예:

사용 세피아 조정은 여기에서

 <head>
     <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .img{

             -webkit-filter:sepia(70%);
          } 
      </style>
  </head>
 <body>
 <img src="img/boke.png" alt="">
 <img class="img" src="img/boke.png" alt="">
 </body>

로그인 후 복사

다음으로 필터의 경우 속성의 일부 값을 예로 사용합니다. 다른 흥미로운 사항은 블로거가 발견해야 합니다. 저와 공유하실 수 있습니다

(1)hue-rotate(색상 회전)

효과는 사진에 나와 있습니다. 사용 효과는 모든 사람이 발견할 수 있는지에 따라 다릅니다.

     <style>
          .img{
              -webkit-filter:hue-rotate(330deg);
          }
      </style>
  </head>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>

로그인 후 복사

효과 그림: #🎜 🎜#

(2)blur( 흐림)

blur(흐림 효과, 단위 px)　　

     <style>
          .img{
            -webkit-filter:blur(1px);
          }
      </style>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>

로그인 후 복사

샘플 이미지:

(3)색상 반전

invert 색상을 반전시키면 사진이 네거티브처럼 보입니다. 더 이상 말할 필요가 없습니다. 코드를 보세요:

 <style>
        .img{
            -webkit-filter:invert(100%);
        }
    </style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>

로그인 후 복사

샘플 사진:

위 내용이 이 글의 전체 내용이기를 바랍니다. 모든 분들의 학습에 도움이 될 것입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7849

자바 튜토리얼

1649

Cakephp 튜토리얼

1403

라라벨 튜토리얼

1300

PHP 튜토리얼

1241

Related knowledge

순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예) Jun 28, 2022 pm 01:39 PM

순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.

CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함) Jul 19, 2022 am 11:28 AM

이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.

공간을 차지하지 않고 CSS에서 요소를 숨기는 방법 Jun 01, 2022 pm 07:15 PM

두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.

CSS3에서 레이스 테두리를 구현하는 방법 Sep 16, 2022 pm 07:11 PM

CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.

CSS3에서 마우스를 클릭하여 이미지를 확대하는 방법 Apr 25, 2022 pm 04:52 PM

구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".

텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다! Jun 10, 2022 pm 01:00 PM

텍스트 회전판과 이미지 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.

CSS3에서 애니메이션 회전 속도를 설정하는 방법 Apr 28, 2022 pm 04:32 PM

CSS3에서는 "animation-timing-function" 속성을 사용하여 애니메이션 회전 속도를 설정할 수 있습니다. 이 속성은 애니메이션이 순환을 완료하는 방법을 지정하고 애니메이션의 속도 곡선을 설정하는 데 사용됩니다. 애니메이션 타이밍 기능: 속도 속성 값;}".

'[Vue 경고]: 필터를 확인하지 못했습니다' 오류 해결 방법 Aug 19, 2023 pm 03:33 PM

"[Vuewarn]:Failedtoresolvefilter" 오류를 해결하는 방법 Vue를 사용하여 개발 프로세스를 진행하는 동안 "[Vuewarn]:Failedtoresolvefilter"라는 오류 메시지가 나타나는 경우가 있습니다. 이 오류 메시지는 일반적으로 템플릿에서 정의되지 않은 필터를 사용할 때 발생합니다. 이 문서에서는 이 오류를 해결하는 방법을 설명하고 해당 코드 예제를 제공합니다. 우리가 Vue에 있을 때

See all articles

CSS3의 필터 속성 소개

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제