>  기사  >  웹 프론트엔드  >  CSS3의 필터 속성 소개

CSS3의 필터 속성 소개

不言
不言원래의
2018-07-02 10:11:481492검색

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

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

1. 정의 

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

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

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

2. 구문filter: 없음 | 흐림() | 밝기() | drop-shadow() | greyscale() | opacity() | sepia();

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

    grayscale greyscale
  1. 세피아 브라운(옛날 사진 느낌)
  2. #🎜🎜 #

    saturate채도
  3. hue-rotate색상 회전
  4. #🎜 🎜#색상 반전# 🎜🎜#

  5. 불투명도

  6. 밝기

    # 🎜🎜## 🎜🎜#contrast대비
  7. blur #
  8. 예:
  9. 사용 세피아 조정은 여기에서

     <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>
  10. 예제 사진: # 🎜🎜#

3.  

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

(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 중국어 홈페이지를 주목해주세요!

관련 추천:


CSS3의 애니메이션 속성인 변환 및 전환과 애니메이션 속성 간의 차이점 분석

# 🎜🎜#

css3의 모바일 속성 분석

DIV를 중앙에 배치하기 위해 position:fixed 속성을 사용하는 방법

# 🎜🎜#

위 내용은 CSS3의 필터 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.