CSSは画像の灰色と透明度を実現する

2492 ワード

【写真がグレーになる】
哀悼の日になると、多くのサイトが急速に灰色に変わり、実現方法を見てみましょう.
 
方式1、ieのみサポート)
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

方式2、小さなページに適し、ieのみをサポート)
body {filter:gray}

方式3、ieとchromeのみサポート)
html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}

方式4、すべてのブラウザをサポート)
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js" type="text/javascript"></script>

<script type="text/javascript">

    window.onload=function(){

    grayscale(document.body);

    }

</script>

 
推奨方法:方法3>方法4>方法1>方法2
推薦原因:方法3はfirefoxをサポートしていないが、安定していて、速度が速くて、資源を占有するのが小さい!
【透き通った画像】
次に、画像が透明で、コードを直接見ます.
filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.1;

説明:
最初のプロパティ(filter)はieのみをサポートします.
2番目のプロパティ(-moz-opacity)firefoxの低バージョンサポート
3番目のプロパティ(opacity)firefoxの高バージョンサポート