> 웹 프론트엔드 > CSS 튜토리얼 > 웹페이지를 흑백으로 바꾸는 CSS

웹페이지를 흑백으로 바꾸는 CSS

王林
풀어 주다: 2020-05-12 09:19:22
앞으로
4556명이 탐색했습니다.

웹페이지를 흑백으로 바꾸는 CSS

전체 웹페이지의 색상을 전체적으로 변경하는 세 가지 방법이 있습니다. 즉, 직접 CSS 설정, svg 필터 추가, js를 통해 모든 태그를 순회하여 색상 변경입니다.

1. CSS를 직접 설정

스타일을 직접 편집한 후 적용해야 할 클래스를

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
로그인 후 복사

설정하세요. (동영상 튜토리얼: css video tutorial)

2. 먼저 svg 파일을 작성하세요.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>
로그인 후 복사

css 호출

filter: url(gray.svg#grayscale);
로그인 후 복사

3.js traversal

코드를 직접 삽입하면 됩니다. (ps: rgba 및 !important는 변경할 수 없으며 다른 것들은 테스트되지 않았습니다.)

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
로그인 후 복사

js 소스가 별로 좋지 않습니다. 웹페이지가 너무 느리게 로드되면 수동으로 greyscale.js를 로컬로 다운로드할 수 있습니다(열고 나서 F12를 클릭하고 네트워크 탭으로 전환하고 웹페이지를 새로 고치면 파일이 표시되며 마우스 오른쪽 버튼을 클릭하여 다른 이름으로 저장).

그런 다음 js 또는 jq를 사용하여

/*js调用*/
grayscale(document.getElementById("thisImage"));
/*jq调用*/
grayscale($("#thisImage"));
로그인 후 복사

를 호출하세요. 권장 튜토리얼:

Css로 빠른 시작

위 내용은 웹페이지를 흑백으로 바꾸는 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:cnblogs.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿