지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

웹 사이트 또는 웹 페이지의 전체 인터페이스를 흑백 및 회색 톤 CSS 코드로 전환

巴扎黑
풀어 주다： 2017-06-09 14:24:53
원래의
5288명이 탐색했습니다.

웹 사이트 또는 웹 페이지의 전체 인터페이스를 흑백 및 회색 톤 CSS 코드로 전환

말할 것도 별로 없고, 웹사이트나 웹페이지를 흑백으로 바꾸는 코드를 봐주세요

###웹페이지 흑백 코드 외부 스타일
***

html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}123
로그인 후 복사

###를 사용하세요 .css 파일을 작성하기 위한 웹 페이지 흑백 코드 내부 스타일
은 head 태그에 작성 

<style type="text/css"><!--html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}--></style>1234567
로그인 후 복사

### 웹 페이지의 흑백 코드는 html 태그에 인라인
작성되며 html은 found

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">12
로그인 후 복사

### 웹페이지 QQ 그룹 공간 버전의 흑백 코드, 대부분의 주류 브라우저용
**.css 파일 작성 시 *

html {-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\&#39;http://www.w3.org/2000/svg\&#39;><filter id=\&#39;grayscale\&#39;><feColorMatrix type=\&#39;matrix\&#39; values=\&#39;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\&#39;/></filter></svg>#grayscale"); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
로그인 후 복사
를 사용하세요.

위 내용은 웹 사이트 또는 웹 페이지의 전체 인터페이스를 흑백 및 회색 톤 CSS 코드로 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
网站、网页 变成黑白灰色调
원천：php.cn
이전 기사：웹사이트를 흑백으로 바꾸는 4가지 코드에 대한 자세한 설명 다음 기사：아이콘폰트란 무엇인가요? CSS의 iconfont 인스턴스 사용법 요약
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
다른 CSS 코드가 무엇이든 관계없이 Flexbox의 텍스트를 수직 중앙에 강제로 배치할 수 있는 방법이 있나요? 제가 개발 중인 웹사이트에 사용되는 더 큰 CSS 코드의 일부인 다음 CSS 코드가 있습니다. .cards-u{display:flex;flex-wrap:wrap;...
에서 2024-04-06 20:41:51
0
1
518
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
그리드를 사용하여 특정 디자인 만들기: 단계별 가이드 이 이미지와 유사한 레이아웃을 만들려고 합니다. 이 그리드를 사용해 보았지만 그렇게 할 수 없습니다. <ulclass="container"...
에서 2024-04-06 20:29:08
0
2
492
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿