웹페이지를 흑백으로 바꾸는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!