CSS3 필터 속성에 대한 자세한 설명

이번에는 CSS3 필터 속성에 대해 자세히 설명하고 CSS3 필터 속성 사용 시 주의사항은 무엇인지 살펴보겠습니다.

최근 웹사이트를 구축하는 과정에서 매우 강력한 CSS3 속성을 발견했는데, 바로 필터 속성입니다. p-picture를 좋아하는 친구들은 이름만 봐도 이 아티팩트가 무엇인지 알 수 있을 것입니다. 물론 이 속성의 효과는 PS와 비교할 수는 없지만, 잘 활용하면 공간을 많이 절약하면서 한 장의 사진을 두 장의 효과로 만들 수 있다.

1. 정의　　

filter는 문자 그대로 필터를 의미합니다. 공식적으로 정의된 필터 속성은 요소(일반적으로 )의 시각적 효과를 정의합니다. :

<style>
    img{
　　　　　　/*灰度100%*/
        -webkit-filter:grayscale(100%);
    }
</style>
<img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="CSS3 필터 속성에 대한 자세한 설명" >

이 효과를 보고 블로거들이 필터에 관심을 가지게 되었나요?

2. 필터: 없음 | 흐림() | 대비() | 회색조() | | opacity() | saturate() | url();보시다시피 이 속성은 무엇을 의미하나요?

grayscale

세피아 브라운(옛날 사진 느낌)
saturate
hue-rotate 색상 회전
invert invert
불투명도 투명도
밝기밝기
contrast
blur
drop-shadow
10. 예:

여기서 사용됨 세피아 조정

 
     <meta>
      <title>Title</title>
      <style>
          .img{
             -webkit-filter:sepia(70%);
          } 
      </style>
  
 
 <img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="CSS3 필터 속성에 대한 자세한 설명" >
 <img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="CSS3 필터 속성에 대한 자세한 설명" >
 

examplepicture ：

3. 예시

　

아래에는 필터 속성의 여러 값에 대한 예가 나와 있습니다. 다른 흥미로운 사항은 블로거가 발견해야 할 사항이 있으면 저에게 공유해 주세요. 1)색상 회전(색상 회전)효과는 그림에 표시됩니다. 구체적인 효과는 발견하는 사람에 따라 다릅니다.

     <style>
          .img{
              -webkit-filter:hue-rotate(330deg);
          }
      </style>
  
  
  <img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="CSS3 필터 속성에 대한 자세한 설명" >
  <img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="CSS3 필터 속성에 대한 자세한 설명" >
 

렌더링:

(2)blur(blur)

Blur(흐림 효과, 단위 px)　

     <style>
          .img{
            -webkit-filter:blur(1px);
          }
      </style>
  
  <img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="CSS3 필터 속성에 대한 자세한 설명" >
  <img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="CSS3 필터 속성에 대한 자세한 설명" >
 

샘플 사진:

(3) invert invert

invert invert 사진이 네거티브처럼 보이도록 만들 수 있습니다. 코드를 살펴보세요. :

 <style>
        .img{
            -webkit-filter:invert(100%);
        }
    </style>

<img  src="/static/imghwm/default1.png" data-src="img/boke.png" class="lazy" alt="CSS3 필터 속성에 대한 자세한 설명" >
<img  class="img lazy" src="/static/imghwm/default1.png" data-src="img/boke.png" alt="CSS3 필터 속성에 대한 자세한 설명" >

예제 사진:

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

CSS에서 텍스트 생략을 사용자 정의하는 방법

CSS에서 속성 값 상속을 사용하는 방법

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