だけでカラービットマップをグレースケールで表示する簡単な方法はありHTML/CSSますか?
IE と互換性がある必要はありません (そうなるとは思いません)。FF3 や Sf3 で動作するのであれば、それで十分です。
Canvas と Canvas の両方でできることはわかっていますがSVG、今は大変な作業のようです。
本当に怠惰な人がこれを行う方法はありますか?
454315 次
25 に答える
771
CSS フィルターのサポートが Webkit に追加されました。 これで、クロスブラウザー ソリューションが完成しました。
img {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}
/* Disable grayscale on hover */
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">Internet Explorer 10 はどうですか?
grayのようなポリフィルを使用できます。
于 2011-12-23T03:45:01.577 に答える
130
brillout.com の回答とRoman Nurik の回答に続き、「SVG なし」の要件を多少緩和すると、単一の SVG ファイルといくつかの CSS のみを使用して、Firefox で画像の彩度を下げることができます。
SVG ファイルは次のようになります。
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<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>
これを resources.svg として保存します。今後、グレースケールに変更したい画像に再利用できます。
filterCSS では、Firefox 固有のプロパティを使用してフィルターを参照します。
.target {
filter: url(resources.svg#desaturate);
}
必要に応じて MS 独自のものも追加し、そのクラスをグレースケールに変換する任意の画像に適用します (Firefox > 3.5、IE8 で動作します)。
edit : ここで説明されている SVG アプローチと連携して、SalmanPK の回答で新しい CSS3 プロパティを使用する方法を説明する素敵なブログ投稿があります。filterそのアプローチを使用すると、次のような結果になります。
img.desaturate{
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Old WebKit */
-webkit-filter: grayscale(100%); /* New WebKit */
filter: url(resources.svg#desaturate); /* older Firefox */
filter: grayscale(100%); /* Current draft standard */
}
于 2010-10-26T23:45:45.277 に答える
85
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」文字列をファイルエンコーディングに置き換えるように注意してください。
ブラウザは 2 番目の HTTP リクエストを行う必要がないため、この方法は他の方法よりも高速です。
于 2012-11-30T06:57:02.373 に答える
28
更新:これを IE10 および IE11 の JavaScript ポリフィルを含む完全な GitHub リポジトリにしました: https://github.com/karlhorky/gray
私はもともとSalmanPK の answerを使用していましたが、SVG ファイルに必要な余分な HTTP リクエストを排除するために以下のバリエーションを作成しました。インライン SVG は Firefox バージョン 10 以降で動作し、10 未満のバージョンは、グローバル ブラウザー市場の 1% を占めることさえなくなりました。
それ以来、このブログ投稿でソリューションを最新の状態に保ち、色へのフェード バックのサポート、SVG による IE 10/11 のサポート、およびデモの部分的なグレースケールを追加しています。
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%);
}
于 2012-11-01T19:32:33.247 に答える
14
CSS だけでグレースケールを実現する最も簡単な方法は、filterプロパティを使用することです。
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
このプロパティはまだ完全にはサポートされておらず、-webkit-filterすべてのブラウザでサポートするにはプロパティが必要です。
于 2016-11-04T09:34:07.973 に答える
14
JavaScript を使用できる場合は、このスクリプトを探している可能性があります。クロスブラウザで動作し、今のところ問題なく動作しています。別のドメインから読み込まれた画像では使用できません。
于 2010-12-08T15:41:21.377 に答える
12
今日も同じ問題が発生しました。最初はSalmanPK ソリューションを使用していましたが、FF と他のブラウザーでは効果が異なることがわかりました。これは、変換マトリックスが、Chrome/IE のフィルターのような輝度ではなく、明度のみに作用するためです。驚いたことに、SVG での代替のより単純なソリューションが FF4+ でも機能し、より良い結果が得られることがわかりました。
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="saturate" values="0"/>
</filter>
</svg>
CSS を使用:
img {
filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
もう 1 つの注意点は、IE10 が標準準拠モードで "filter: gray:" をサポートしていないことです。そのため、機能するにはヘッダーで互換モード スイッチが必要です。
<meta http-equiv="X-UA-Compatible" content="IE=9" />
于 2012-03-05T16:04:24.243 に答える
8
これを行う新しい方法が、最新のブラウザーでしばらく前から利用可能になっています。
background-blend-modeを使用すると、いくつかの興味深い効果を得ることができます。その 1 つがグレースケール変換です。
白い背景に設定された値luminosityはそれを可能にします。(ホバーすると灰色で表示されます)
.test {
width: 300px;
height: 200px;
background: url("http://placekitten.com/1000/750"), white;
background-size: cover;
}
.test:hover {
background-blend-mode: luminosity;
}<div class="test"></div>明度は画像から取得され、色は背景から取得されます。常に白なので色はありません。
しかし、それははるかに多くを可能にします。
エフェクト設定 3 レイヤーをアニメートできます。1 つ目は画像で、2 つ目は白黒のグラデーションです。これに乗算ブレンドモードを適用すると、白い部分は元のように白い結果が得られますが、黒い部分は元の画像になります (白を乗算すると白になり、黒を乗算しても効果はありません)。
グラデーションの白い部分では、前と同じ効果が得られます。グラデーションの黒い部分では、画像をそれ自体の上にブレンドしているため、結果は変更されていない画像になります。
あとは、グラデーションを移動してこの効果を動的にするだけです: (ホバーすると色で表示されます)
div {
width: 600px;
height: 400px;
}
.test {
background: url("http://placekitten.com/1000/750"),
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750");
background-position: 0px 0px, 0px 0%, 0px 0px;
background-size: cover, 100% 300%, cover;
background-blend-mode: luminosity, multiply;
transition: all 2s;
}
.test:hover {
background-position: 0px 0px, 0px 66%, 0px 0px;
}<div class="test"></div>于 2015-03-02T18:17:14.390 に答える
7
CSS3、プロプライエタリ-webkit-、または-moz-CSSプロパティを使用しても、（まだ）可能ではないようです。
しかし、昨年6月から、HTMLでSVGフィルターを使用したこの投稿を見つけました。現在のブラウザ（カスタムWebKitビルドを示唆するデモ）では利用できませんが、概念実証としては非常に印象的です。
于 2009-06-11T04:05:36.613 に答える
7
Internet Explorer では、filter プロパティを使用します。
Webkit と Firefox では現在、CSS だけで画像の彩度を下げる方法はありません。そのため、クライアント側のソリューションにはキャンバスまたは SVG を使用する必要があります。
しかし、SVG を使用する方がよりエレガントだと思います。Firefox と Webkit の両方で機能する SVG ソリューションについては、私のブログ投稿をご覧ください: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
厳密に言えば、SVG は HTML であるため、ソリューションは純粋な html+css です :-)
于 2010-10-26T18:58:22.623 に答える
7
他の回答で無視された 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("#filtersPicture")" 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を確認してください。
于 2013-04-28T05:23:54.677 に答える
3
独自の CSS プロパティを正しく使用したことを覚えていれば、実際には IE で行う方が簡単です。http://www.ssi-developer.net/css/visual-filters.shtmlFILTER: Grayからこれを試してください
Axeによる方法は、単純に画像を透明にし、背景を黒くします。これはグレースケールだと主張できると思います。
あなたは Javascript を使いたくないのですが、使わなければならないと思います。サーバー側の言語を使用してそれを行うこともできます。
于 2009-03-04T05:20:43.320 に答える
2
Javascript を使用する場合は、キャンバスを使用して画像をグレースケールに変換できます。Firefox と Safari がサポートされているので<canvas>、動作するはずです。
そこで、「キャンバス グレースケール」をググったところ、最初の結果はhttp://www.permadi.com/tutorial/jsCanvasGrayscale/index.htmlで、動作しているようです。
于 2010-10-19T04:58:39.350 に答える
2
現在のバージョン 19.0.1084.46 から、Webkit のネイティブ CSS フィルターのサポートが追加されました。
-webkit-filter: grayscale(1) が機能し、Webkit の SVG アプローチよりも簡単です...
于 2012-05-16T10:56:05.223 に答える
2
古いFirefox用のプレフィックスを選択すると、新しいFirefox用のプレフィックスを使用する必要がないため、完全に使用するために多くのプレフィックスを使用する必要はありません。
したがって、完全に使用するには、次のコードを使用して十分です。
img.grayscale {
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 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img.grayscale.disabled {
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");
filter: none;
-webkit-filter: grayscale(0%);
}
于 2015-01-26T06:22:38.607 に答える
2
これは、任意の不透明度を選択できる LESS の mixin です。さまざまなパーセンテージでプレーン CSS の変数を自分で入力します。
ここでのきちんとしたヒント、マトリックスに飽和型を使用するため、パーセンテージを変更するために特別なことをする必要はありません。
.saturate(@value:0) {
@percent: percentage(@value);
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(@percent); /* Current draft standard */
-webkit-filter: grayscale(@percent); /* New WebKit */
-moz-filter: grayscale(@percent);
-ms-filter: grayscale(@percent);
-o-filter: grayscale(@percent);
}
次に、それを使用します。
img.desaturate {
transition: all 0.2s linear;
.saturate(0);
&:hover {
.saturate(1);
}
}
于 2013-11-08T20:00:35.007 に答える
1
古いブラウザーの代わりに、疑似要素またはインライン タグによって生成されたマスクを使用することができます。
rgba() または translucide png を介して、img (またはクリックや選択を必要としないテキスト領域) をホバーする絶対位置は、 color scale の効果を厳密に模倣できます。
単一のカラー スケールを提供するわけではありませんが、範囲外の色に陰影を付けます。
疑似要素を介して 10 色のコード ペンでテストします。最後は gray です。http://codepen.io/gcyrillus/pen/nqpDd (リロードして別のイメージに切り替えます)
于 2013-06-18T13:01:16.567 に答える
0
恐ろしいが実行可能な解決策の 1 つは、Flash オブジェクトを使用して画像をレンダリングすることです。これにより、Flash で可能なすべての変換が得られます。
ユーザーが最先端のブラウザーを使用していて、 Firefox 3.5 と Safari 4 がそれをサポートしている場合(どちらもサポートするかどうかはわかりません)、画像の CSS color-profile属性を調整して、グレースケール ICC に設定できます。プロフィールURL。しかし、それは多くの場合です！
于 2009-06-11T04:41:43.877 に答える
0
jFunc の関数の 1 つを使用できます - 関数「jFunc_CanvasFilterGrayscale」を使用します http://jfunc.com/jFunc-functions.aspx
于 2013-10-01T11:00:46.167 に答える
-1
あなた、または将来同様の問題に直面する他の誰かが PHP に対してオープンである場合。(HTML/CSS と言ったのは知っていますが、バックエンドで既に PHP を使用している可能性があります) PHP ソリューションは次のとおりです。
PHP GD ライブラリから取得し、プロセスを自動化する変数を追加しました...
<?php
$img = @imagecreatefromgif("php.gif");
if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);
// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');
// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);
// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);
imagedestroy($dest);
imagedestroy($src);
?>
于 2010-10-16T00:56:41.560 に答える