1

Nivoスライダーを使用していますが、PNG画像をスライダーの上に配置して、透明な部分だけが透けて見えるようにします。JavaScriptまたはCSSを使用してこれを行うための最良の方法は何でしょうか？

4

5 に答える 5

7

以下のコードを使用してデモを変更し、これを行う方法を確認してください。これを行う方法はたくさんあるので、自分の状況に最適な方法を見つけ出す必要があります。以下のコードは、同じdiv内にスライダーと別の比較的配置された画像をラップします。画像の配置にはCSSが少し使用されており、実際の効果を確認できます。

HTML

<div id="outer-wrapper">

            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="slider-mask"></div>
</div>

CSS

#outer-wrapper {
    width:618px;
    height:246px;
    margin-left:190px;
}

#slider-mask {
    position:relative;
    background:url(images/mask.png) no-repeat;
    width:618px;
    height:246px;
    top:-246px;
    left:0;
    z-index:100;
}

使用した画像 ここに画像の説明を入力してください

効果のスクリーンショット ここに画像の説明を入力してください

于 2011-05-05T01:50:14.470 に答える
1

PNGを絶対位置に設定し、nivoスライダーの上に移動するだけです。z-indexがスライダーの上に設定されていることを確認してください。

于 2011-05-03T21:30:35.740 に答える
1

このスライダーを見てください（例）。

于 2011-04-27T07:19:28.087 に答える
1

相対位置のdivに配置された場合の絶対位置のdivは、必要な結果が得られます。

nivoスライダーコンテナを相対位置に配置し、マスクdivをnivoスライダーコンテナ内に配置して、その絶対位置に配置します。

それがあなたを助けることを願っています

于 2011-05-03T22:42:23.990 に答える
0

私はデザイナーから同じ仕事をしました。つまり、アニメーションの上にマスクを置くことです。

これは簡単な部分でした!!! 複雑な部分は次のとおりです。

  • リンクを再び機能させる
  • それらの上にマウスを置くと、バックアニメーションが一時停止します。
  • controlNavボタンを画像の上に配置し、それらを機能させるには...

それで、私はこれを開発して使用しなければなりませんでした（私によって行われ、そこで詳細に説明されました）：

多分これは将来他の人を助けるでしょう;）

ラズヴァン

于 2012-07-16T19:11:17.757 に答える