在HTML / CSS中將圖像轉換爲灰度

時間 2020-01-08

標籤 html css 中將圖像轉換灰度欄目 HTML 简体版

原文原文鏈接

有沒有一種簡單的方法能夠用HTML/CSS顯示灰度的彩色位圖？ css

它不須要與IE兼容（我想它不會） - 若是它在FF3和/或Sf3中工做，這對我來講已經足夠了。 html

我知道我能夠用SVG和Canvas來作，但如今看起來不少工做。 css3

有一個真正懶惰的人這樣作的方法嗎？ git

#1樓

從當前版本19.0.1084.46添加了對webkit中的本機CSS過濾器的支持 github

因此-webkit-filter：grayscale（1）能夠工做，比webkit的SVG方法更容易... web

#2樓

更新：我把它變成了一個完整的GitHub倉庫，包括用於IE10和IE11的JavaScript polyfill： https ： //github.com/karlhorky/gray 瀏覽器

我最初使用SalmanPK的答案，但隨後建立了下面的變體以消除SVG文件所需的額外HTTP請求。內聯SVG適用於Firefox 10及更高版本，低於10的版本再也不佔全球瀏覽器市場的1％。 ide

從那之後，我一直在這篇博文上更新解決方案，增長了對淡入淡出的支持，對SVG的IE 10/11支持以及演示中的部分灰度。 svg

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

#3樓

對於Firefox，您不須要建立filter.svg文件，您可使用數據URI方案。測試

拿起第一個答案的css代碼給出：

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

請注意用文件編碼替換「utf-8」字符串。

此方法應該比另外一個更快，由於瀏覽器不須要執行第二個HTTP請求。

#4樓

對於那些在其餘答案中詢問被忽略的IE10 +支持的人，請查看這篇CSS：

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

應用於此標記：

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

有關更多演示，請查看IE testdrive的CSS3 Graphics部分和這個舊的IE博客http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx