css3의 Filter

5450 단어 filter
이번 주 홈페이지에서 개인적으로는 몰랐던 css3에 대한 새로운 속성 Filter를 만났습니다.구체적으로 나는 두 배경이 일부분을 겹치는 상황에서 최하층의 배경이 광감도에서 어두운 색을 띠게 하고 싶다.뒤에 자신이 조회를 통해 이 필터를 찾았고 그는 속성이 10개가 아닌 10개가 있는 것을 발견했다.다음은 제 눈에 보이는 css3의 Filter를 소개해 드리겠습니다.
filter는 주로 그림에 활용하여 일부 특수 효과를 실현한다.
기본값은 none이며 상속성이 없으며 Filter-function 중 하나는 다음 값을 선택할 수 있습니다.
  • grayscale 그레이스케일
  • 세피아 브라운
  • saturate 포화도
  • hue-rotate 색상 회전
  • invert 반색
  • opacity 투명도
  • Brightness 밝기
  • contrast 대비도
  • blur모호
  • drop-shadow 섀도우
  • 1:이번 홈페이지에서 나는grayscale를 사용했다.색상은 주로 흰색과 회색 사이에 있습니다). 
         .grayscale{ -webkit-filter:grayscale(1); } 
    2: ,
    .sepia{
     -webkit-filter:sepia(1); } 
    3:saturat :
     .saturate{ -webkit-filter:saturate(0.5); } 
    4:hue-rotate         
     .hue-rotate{ -webkit-filter:hue-rotate(90deg); }
    5:invert
    .invert{ -webkit-filter:invert(1); }
    6:
      .opacity{ -webkit-filter:opacity(.2); }
    7:
          .brightness{ -webkit-filter:brightness(.5); }
    8:
     .contrast{ -webkit-filter:contrast(2); }
    9:
    .blur{ -webkit-filter:blur(3px); }
    10: box-shadow ,
    .drop-shadow{ -webkit-filter:drop-shadow(5px 5px 5px #ccc); }
    , 。
     


















    좋은 웹페이지 즐겨찾기