1

コードに次のアイコンがあります。

HTML:

<a href="#" id="PickUp" class="PickUpIcon"></a>

CSS:

width: 24px;
height: 24px;
background: url(../images/Icons/Answer.jpg) no-repeat;
cursor: pointer;

次のようになります。ここに画像の説明を入力

(css、js、または jQuery を使用して) このアイコンを次のように変更します。ここに画像の説明を入力

カラーアイコンを白黒のものに変える意味はありますか？

HTML 4、CSS2、IE 8 を使用しています (HTML5 やその他のブラウザーは使用できません)。

2 つの異なるアイコンを使用できることはわかっていますが、アイコンを動的に追加できるため、別の可能性があるかどうかを知りたいです。誰もが 2 つのアイコンを提供する必要はありません。

4

7 に答える 7

3

あなたはSVGでそれを行うことができます

この回答を確認してください https://stackoverflow.com/a/8612047/1033200

<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>

次に、この CSS を使用します:- [デモ]

img {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

ホバー時にグレースケールを無効にするには、次を使用できます。

img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
于 2013-02-27T09:30:13.930 に答える
1

を使用できますがfilter: grayscale(100%);、現在は Chrome でのみサポートされています。

<a href="#" id="PickUp" class="PickUpIcon">
    <img src='http://i.stack.imgur.com/tVNmr.jpg' class="bw" />
</a>

img.bw {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

http://jsfiddle.net/ruslans/ZK3dY/

ソース

于 2013-02-27T09:32:20.107 に答える
0 
.PickUpIcon a:hover {
  width: 24px;
  height: 24px;
  background: url(../images/Icons/Answer_grey.jpg) no-repeat;
  cursor: pointer;
}

Answer_grey.jpg は灰色の画像です。これは単純な方法であり、すべてのブラウザーで機能します。両方の画像 (緑と灰色) を 1 つの画像に追加し、ホバー時に表示する画像の部分を変更するより良い方法があります。これは、ページ 1 の画像を読み込んでいる場合は問題ないため、より優れていますが、2 つの画像がある場合、ホバーすると、この画像がどのように読み込まれるかがわかります (この画像が大きい場合)。

于 2013-02-27T09:38:26.700 に答える
0

CSS スプライトを使用できます。

どこでも機能し、ほぼすべての Web サイトで使用されています。

両方の画像を並べたアイコンを使用し、 と を調整することで画像の一部のみをbackground-position表示widthできheightますbackground-image

于 2013-02-27T09:37:01.373 に答える
0 
a { 
width: 24px;
height: 24px;
background: url(http://i.stack.imgur.com/tVNmr.jpg) no-repeat;
cursor: pointer;
display: block;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

サンプル

于 2013-02-27T09:36:10.200 に答える
0 
    img { 
     filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    }
于 2013-02-27T09:30:56.313 に答える
0

以前にいくつかの Web サイトでこれを使用したことがありますが、クロスブラウザーと完全に互換性があるはずです。

element { 
    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");
    filter:gray;
    -webkit-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray(1);
    filter: grayscale(100%);
}
于 2013-02-27T09:34:42.573 に答える