CSS는 이미지 회색조 효과를 구현하며 다양한 브라우저와 호환됩니다.

이 장에서는 CSS를 사용하여 이미지의 회색조 효과를 얻는 방법을 소개합니다. CSS는 360 브라우저와 같은 다양한 브라우저와 호환됩니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS는 CSS 스타일을 통해 컬러 이미지를 회색으로 표시하여 이미지의 회색조 효과를 얻습니다. 이는 이미지의 색상 모드를 회색조로 조정하는 것과 같습니다. CSS는 다음 방법을 통해 회색조 효과를 얻을 수 있습니다.

방법 1. IE 필터

img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法
img { filter:Gray; } //简写

IE 시리즈 브라우저는 모두 IE 필터의 속성을 지원하며, IE가 아닌 브라우저는 서버에서 이 속성을 지원합니다. 그것을 지원하지 않습니다.

방법 2. CSS3 필터

img { -webkit-filter: grayscale(100%); }

CSS3 필터는 아직 표준 속성이 아니며, 현재는 Google에만 있습니다. Chrome 브라우저에서는 지원되지만 다른 브라우저에서는 지원되지 않습니다

CSS 그레이스케일 효과를 사용하면 웹 페이지에 일부 특수 효과를 더 쉽게 구현할 수 있습니다. 5.12를 기념하여 많은 국내 웹 페이지가 하룻밤 사이에 회색으로 변했다는 것을 기억하십니까? 지진? 웹사이트에 다음 스타일을 추가하면 쉽게 얻을 수 있습니다.

html { filter:Gray; -webkit-filter: grayscale(100%); }

누군가 CSS의 회색조 효과는 좋지만 모든 브라우저와 호환될 수는 없다고 말했을 것입니다. 그래요? ? CSS로 아무것도 할 수 없다면 JS를 사용하여 이를 달성하는 방법을 고려해 보세요. 여기서는 JS 그레이스케일 효과 플러그인을 추천합니다.

grayscale.js

사용법:

//引入插件
<script type="text/javascript" src="grayscale.js"></script>

//调用插件
<script type="text/javascript">
    window.onload = function(){
        var el = document.getElementById( &#39;body&#39; );
        grayscale( el );
    };
</script>

은 실행 후 많은 인라인 스타일이 요소에 추가됩니다. 호환성이 있으므로 회색조 효과를 얻으려면 CSS를 사용하는 것이 좋습니다.