scss 스타일 집합

1055 단어 scsscss3css
Scss
  • $alpha, 투명도
  • 야간 모드
  • $alpha, 투명도
  • $alpha, 투명도
  • background:rgba(51, 51, 51, 1);
    background:rgba($color:#333333,$alpha:1);
    
    //¥     ¥
    
    
    

    야간 모드
    filter: invert(xxx); —— CSS의'반상': 그 작용 요소가 이 값을 가지고 있을 때 색조가'뒤집기'가 발생한다. 예를 들어 흰색-검은색;작용 요소가img 그림일 때 그림의 색조도 반전시킬 수 있습니다. xxx는 변환을 정의하는 비례값입니다.100% 가치는 완전 반전이다.값이 0%이면 이미지가 변경되지 않습니다.값이 0%와 100% 사이이면 효과에 대한 선형 곱셈이 됩니다.0과 1 사이의 소수점 표시도 사용할 수 있다.값이 설정되지 않은 경우 기본값은 0입니다.
       .btn{
    	filter:invert(1); 
    	}
    

    이때 전체 페이지에 효과가 있다.만약 페이지에 그림 요소가 있다면, 위에서 말한 바와 같이: invert는 그림에 '반전' 효과를 일으킬 것이다. (이것이야말로 그림의 본뜻이다.)이 때 우리는 그림에서 Filter의 다른 속성 값을 사용할 수 있습니다: inherit:
    img{
    filter: inherit;  /**         **/
    }
    

    물론 당신은 더욱 간단하게 완성할 수 있다.
    body{
    	filter: invert(1) hue-rotate(180deg);
    }
    

    hue-rotate(deg): 그림에 색상 회전을 적용합니다."angle"값은 이미지가 조정되는 색상 루프 각도 값을 설정합니다.값이 0deg이면 이미지가 변경되지 않습니다.값이 설정되지 않은 경우 기본값은 0deg입니다.이 값은 최대치가 없지만 360deg을 넘는 값은 한 바퀴 더 도는 것과 같다.

    좋은 웹페이지 즐겨찾기