web-dev-qa-db-ja.com

グレースケール背景Css画像

Webで多くの検索をしましたが、CSSの背景画像をグレースケールにフェードバックするクロスブラウザーソリューションが見つかりません。

唯一の有効なソリューションは、CSS3フィルターグレースケールを適用することです。

-webkit-filter: grayscale(100%);

ただし、これはChrome v.15 +およびSafari v.6 +でのみ機能します（ここで確認できます： http://css3.bradshawenterprises.com/filters/ ）

オンラインの多くのページでは、要素をグレーアウトするこのソリューションについて説明しています。

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"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */

（ここにあるように： http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html ）

しかし、実際には、Webkitフィルターが行うように、CSS背景画像では機能しないようです。

高度でないブラウザーでのフィルターのサポートの欠如をハックする解決策はありますか（おそらくjqueryを使用しますか）？

cssimagebackgroundcross-browsergrayscale
56
bluantinoo

どうぞ：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<style type="text/css">
    div {
        border: 1px solid black;
        padding: 5px;
        margin: 5px;
        width: 600px;
        height: 600px;
        float: left;
        color: white;
    }
     .grayscale {
         background: url(yourimagehere.jpg);
         -moz-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");
         -o-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");
         -webkit-filter: grayscale(100%);
         filter: gray;
         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");
     }

    .nongrayscale {
        background: url(yourimagehere.jpg);
    }
</style>
</head>
<body>
    <div class="nongrayscale">
        this is a non-grayscale of the bg image
    </div>
    <div class="grayscale">
        this is a grayscale of the bg image
    </div>
</body>
</html>

FireFox、ChromeおよびIEでテストしました。また、この実装の結果を示す画像を添付しました。Grayscale Background Image in DIV Sample

編集：また、jQueryを使用して画像を切り替えるだけの場合は、そのためのページソースがあります... jQueryへのWebリンクとオンラインの画像を含めました。コピーして貼り付けてテストする必要があります：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
    div {
        border: 1px solid black;
        padding: 5px;
        margin: 5px;
        width: 600px;
        height: 600px;
        float: left;
        color: white;
    }
     .grayscale {
         background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
         -moz-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");
         -o-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");
         -webkit-filter: grayscale(100%);
         filter: gray;
         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");
     }

    .nongrayscale {
        background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
    }
</style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#image").mouseover(function () {
                $(".nongrayscale").removeClass().fadeTo(400,0.8).addClass("grayscale").fadeTo(400, 1);
            });
            $("#image").mouseout(function () {
                $(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);
            });
        });
</script>
</head>
<body>
    <div id="image" class="nongrayscale">
        rollover this image to toggle grayscale
    </div>
</body>
</html>

EDIT 2（IE10-11ユーザーの場合）：上記のソリューションは、Microsoftが最近ブラウザに加えた変更では機能しないため、グレースケール（または彩度低下）を可能にする更新されたソリューションを次に示します。 ）画像。

<svg>
  <defs>
    <filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image xlink:href="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg>
72
Element808

現在のブラウザを使用すると、次のように使用できます。

img {
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}

そしてそれを修正する：

img:hover{
   -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
   filter: grayscale(0%);
}

私と一緒に働いて、はるかに短いです。 CSS内でできることは他にもあります。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
        hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

詳細およびサポートするブラウザーについては、以下を参照してください。 http://www.w3schools.com/cssref/css3_pr_filter.asp

15
Sven Ya

私はそれが本当に古い質問であることを知っていますが、duckduckgoでの最初の結果なので、私はそれがより良く、より現代的なソリューションだと思うことを共有したかったです。

background-blend-modeプロパティを使用して、グレースケール画像を実現できます。

#something {
  background-color: #fff;
  background-image: url("yourimage");
  background-blend-mode: luminosity;
}

エフェクトを削除する場合は、ブレンドモードをinitialに変更するだけです。

この要素が背景を持つ何かの上にある場合、背景色で少し遊ぶ必要があるかもしれません。私が見つけたのは、グレースケールは実際の色ではなくアルファ値に依存しているということです。したがって、親に青い背景がある場合は、#somethingに同じ背景を設定します。

また、2つのイメージを使用できます。1つはカラーあり、もう1つはカラーなしで、両方を背景として設定し、他のブレンドモードで再生できます。

https://www.w3schools.com/cssref/pr_background-blend-mode.asp

ただし、Edgeでは機能しません。

編集：質問の「フェード」部分を見逃しています。

グレースケールから/にフェードさせたくない場合、アルファ値を変更する背景色でcssトランジションを使用できます。

#something {
  background-color: rgba(255,255,255,1);
  background-image: url("yourimage");
  background-blend-mode: luminosity;
  transition: background-color 1s ease-out;
}
#something:hover {
  background-color: rgba(255,255,255,0);
}

また、完全性のためにコードペンの例を追加しています https://codepen.io/anon/pen/OBKKVZ

8
arieljuod