CSS를 사용하여 이미지를 흑백으로 변환

시대의 발전과 함께 이제 CSS3의 점진적인 발전과 함께 실제로 "흑백 효과"의 대규모 적용 가능성도 보이기 시작했습니다. 다음으로 CSS3 그레이스케일 필터 구현을 소개하겠습니다. 관심 있는 친구들은 더 많은 것을 배울 수 있습니다. Wenchuan과 같은 상황이 좋지 않은 시대에도 웹사이트를 완전히 회색으로 만드는 것은 IE(필터: 회색;)에서 쉽게 달성할 수 있다는 것을 오랫동안 알고 계셨을 것입니다. 그러나 당시 다른 브라우저에는 해결책이 없었습니다. 그러나 시대의 발전과 함께, 그리고 이제 CSS3의 점진적인 발전에 따라 실제로 "흑백 효과"의 대규모 적용 가능성도 보이기 시작했습니다.

CSS3 그레이스케일 필터 구현
다음 테스트 코드:

코드는 다음과 같습니다.

.gray { 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: grayscale(100%); 
filter: gray; 
}

HTML 코드:

코드는 다음과 같습니다.

<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   / alt="CSS를 사용하여 이미지를 흑백으로 변환" > 
<img  class="gray lazy"  src="/static/imghwm/default1.png"  data-src="mm1.jpg"    / alt="CSS를 사용하여 이미지를 흑백으로 변환" >

브라우저가 있는 경우 Chrome18+입니다. 여기를 클릭하세요: CSS3 그레이스케일 필터 및 흑백 사진 ⤴
비슷한 기사의 시작 부분에 표시된 흑백 대비 효과 사진을 볼 수 있습니다.
FireFox와 같은 다른 브라우저도 곧 뒤따를 것입니다. 물론 FireFox 4 브라우저 등에서 사진을 흑백으로 바꾸는 효과를 얻는 것도 가능합니다. SVG의 그레이스케일 필터 효과를 사용할 수 있습니다.
SVG 필터 구현
새 빈 텍스트 파일을 만듭니다(예: grey.txt). 다음 XML 코드를 복사합니다.

코드는 다음과 같습니다.

<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>

그런 다음 접미사 .txt → .svg를 수정합니다. 그러면 호출할 수 있습니다~~

다음 CSS 호출 코드:
filter: url(gray.svg#grayscale); 그러면 효과가 나옵니다. 가지고 있는 브라우저가 FireFox4+인 경우 여기를 클릭할 수 있습니다. 흑백 사진 데모를 얻기 위한 SVG 필터⤴
IE 브라우저를 잊지 마세요
IE에서의 구현은 위에서 언급되었습니다. 즉, :
filter: grey ;최소 IE7~9를 지원합니다. 최근 IE6을 테스트하기에는 너무 게을러서 지원 여부를 모르겠습니다. 경험에 비추어 볼 때 지원되어야 합니다.
나라를 통일할 방법이 필요해요
나라를 통일하세요(완전호환). CSS만 사용하고 싶다면 낚싯대를 들고 매일 황포강에 낚시하러 가기만 하면 됩니다. 매일, 해마다, 날마다... 그리고 2년 후, 2년 동안 위의 두 데모 페이지에서 F5를 누르면 됩니다! 매우 간단합니다!
위의 접근 방식이 너무 런던 기반이라고 생각하고 외톨이가 아니라면 세상을 통일할 수 있는 방법이 있지만 그것은 CSS 건재가 아니라 Greyscale.js인 것 같습니다. 좀 유명함.
사용법은 매우 간단합니다. 다음과 같이 JavaScript 파일을 인용합니다.
그런 다음 하나로 문장:
grayscale (document.getElementById("thisImage")); 또는 DOM 요소 세트:
grayscale(document.getElementsByTagName("img")); jQuery를 사용하려면 다음을 사용할 수도 있습니다.
grayscale($( "#thisImage")) ; 매우 간단합니다.
구현 원리: IE 브라우저는 회색조 필터를 추가합니다. 다른 브라우저들은 Canvas에서 getImageData 메소드를 사용하고 각 픽셀에 대해 그레이스케일 변환을 수행하는 것 같습니다~~
따라서 최신 브라우저에서는 이 메소드에는 이미지 그레이스케일 처리에 두 가지 제한 사항이 있습니다:
1. 이 300*300 평균 크기 사진이 회색으로 바뀌는 데 몇 초가 걸립니다.
2. 보안 메커니즘, 크로스 도메인 이미지는 흑백으로 변환할 수 없습니다.

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