3

キャラクターの PNG 画像があり、次のようなものが必要です: http://www.swfcabin.com/open/1364482220。

誰かがキャラクターの体の一部をクリックすると、それが「選択」されます。問題は、どうすればそれができるかです。これ以上画像を使用したくありません (複数の文字があるため)。CSS のみを使用したいです。

私はこれを試しました: http://jsfiddle.net/eRVpL/、しかし、緑の背景が白い背景の上に表示され、キャラクターの上だけにしたいです。

コード：

<div class="character">
    <img src="http://img194.imageshack.us/img194/3854/goldgladiator.png" />
    <span></span>
</div>
<style>
.character { width: 210px;display: inline-block; vertical-align: middle; position: relative; }

.character > span {
    display: block;
    width: 200px;
    height: 30%;
    background: rgb(160, 255, 97);
    opacity: .3;
    position: absolute;
    top: 0;
}
img {
    max-width: 200px;
}
</style>
4

3 に答える 3

1

現在、これを実現する CSS のみの手段はありません。作業中の CSS との合成およびブレンドの仕様がありますが、現時点ではまだ製品で使用できるほど十分にサポートされていません。ここで仕様を読むことができます：http://www.w3.org/TR/compositing/

この仕様では、要素のブレンドモードを「スクリーン」、「オーバーレイ」、または「明るく」に設定できます。これにより、キャラクターは緑になりますが、背景は白のままになります。残念ながら、これはまだ不可能です。

最善の方法は、jcubic がコメントの 1 つで言ったように、「マスクを使用する必要があります。画像はまったく同じですが、文字は透明です」。

幸運を！

于 2013-03-28T18:25:02.020 に答える
1

CSS マスクを使用してこれを機能させることができますが、現在は WebKit ブラウザーでのみサポートされています: http://caniuse.com/#feat=css-masks

http://jsfiddle.net/eRVpL/3/

HTML:

<div class="character">
  <img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
  <div class="green-mask"></div>
</div>

CSS:

.green-mask {
  height: 200px;
  width: 508px;
  background: rgb(160, 255, 97);
  opacity: .3;
  position: absolute;
  top: 0;
  -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}

リンクした GIF のように要素をオフセットしたい場合は、マスクされた div の子に色付きの背景を配置します。

http://jsfiddle.net/eRVpL/11/

HTML:

<div class="character">
  <img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
  <div class="green-mask">
    <div class="filler"></div>
  </div>
</div>

CSS:

.filler {
  background-color: rgba(160, 255, 97, 0.3);
  height: 200px;
  margin-top: 200px;
  width: 100%;
}

.green-mask {
  position: absolute;
  width: 508px;
  top: 0;
  -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}

そして、これはただの楽しみです: http://jsfiddle.net/eRVpL/23/文字をクリックしてみてください。JavaScript を使用せずにチェックボックスとラベルを使用します。

于 2013-03-28T18:37:43.333 に答える
-1

z-index欲しいものを手に入れるために使ってみてください。マウス クリックまたはホバーでオブジェクトを表示するまで、特定のページでオブジェクトが非表示になっているように見せることができます。また、基本的にシルエットである緑色の画像を作成し、それを 3 つの異なる部分に分割し、それらに少し正確な位置を与え (それぞれ独自の分割を使用)、小さな z インデックスを持たせることもできます。 . 簡単にするために、実際のキャラクターを 3 つの部分に分割することもできます。

于 2013-03-28T17:10:53.443 に答える