0

究極の目標: 画像が透けて見えるが、フォーム自体によって形作られる成形透明を作成します。画像はロールオーバー ボタンで、ホバーするとグレースケールからカラーに変わります

下の図 (リンク) は、Dreamweaver CS6 で実現したいことを示しています。PS を使用してこのイメージを作成しました。「人の部分」だけを取り出して削除したので、写真は中が透明な白いボックスになりました。私の計画は、この画像を DW に単純に植え付けてから、残りのカラー画像をその下に IMG タグを配置することで配置することでした。

以下のようになると思いましたが、そうではありませんでした。完全な白いページを取得するだけです（サーバーにアップロードせずにオフラインでテストしました）。画像を追加すると、透明度のある PNG が存在するというヒントさえありません。

さて、あなたの提案は何ですか？FW だけを使用して、以下のように作品のスライスを作成する方が簡単でしょうか? その場合、DW で作業するときは、テトリスのように体のすべての部分を一致させる必要があります。これを行うにはもっと簡単な方法があるようですが、どういうわけか私はそれを非常に難しくしています。

さらに情報が必要な場合はお尋ねください。どうもありがとう。

http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg

4

1 に答える 1

0

アウトラインを.PNGとしてアルファ透明度を使用して保存できます。ロールオーバー効果で別の画像を取得するには、以下のようなものを試すことができます。（キャンバスの策略を使用していません）。必要なストリップの高さの 2 倍の画像を作成し、白黒バージョンを上半分に、同じ画像のカラー バージョンを下半分に配置します。

白い輪郭が見えにくい場合は、ページの背景を一時的に黒に設定してみてください。

画像ファイルに正しくリンクされていることを再確認するには、Chrome で f12 を押して、[フレーム] > [画像] の [リソース] タブを確認することもできます。

.container {
width: 500px; height: 800px;
}

.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}

.image-strip img:hover {
margin-top: -200px;
}

.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}


<div id="container">

   <div class="image-strip"><img src="1.jpg" /></div>
   <div class="image-strip"><img src="2.jpg" /></div>
   <div class="image-strip"><img src="3.jpg" /></div>
   <div class="image-strip"><img src="4.jpg" /></div>

   <div id="woman-outline"></div>

</div>
于 2013-03-17T04:26:22.150 に答える