2

私のプロジェクト用に拡張可能なスライドショーを作成しようとしていますが、期待どおりに表示するために div をスタイリングするのに行き詰まりました。

#shadow div と #bgimg div という別の 2 つの div を保持する div #container を取得しました。

<div class="container" id="container">
     <div class="shadow"></div>
     <div class="bgimg"></div>
</div>​

.container {
    width:   81px;
    height:  500px;
    background-color: red;
    overflow: hidden;
}

.bgimg {
    width:   300px;
    height:  100%;
    background: url("http://www.jbraccini.com/files/bg.jpg") no-repeat left top;
}

.shadow {
    width:   100%;
    height:  100%;
    background: url("http://www.jbraccini.com/files/container-shadow.png") no-repeat right top;
    position: relative;
}

  • #bgimg div は、スライドショーが表示される実際の画像を保持するためのものです。

  • #container div オーバーフロー プロパティは非表示に設定されており、幅と高さも設定されています。後で、javascript を使用して、マウスオーバー (ホバー) およびマウスアウト イベントを検出して、画像を拡大し、より大きな視点で表示することを計画しました。

  • #shadow div は #bgimg の上に配置される予定で (同じ場所にありますが、z インデックスが高くなります)、#container をエミュレートするために背景画像として右上に配置された透明な png(画像) が配置されます。内側の影なので、スライドショーは (視覚的に言えば) ページの本文に何らかの形で物理的に埋め込まれているように見えます。

最終的な結果は、#container の幅を変更すると、幅が 100% に設定されているため、#shadow の幅も変更され、#bgimg がカバーされていない間、シャドウが右上に配置されます。

私は明らかにそのような結果を達成しませんでした:D #shadow div は #bgimg の上に留まり、それを一番下に押し込みます。#shadow position: absolute; を設定してみました。しかし、コードで #shadow プロパティを変更する必要がないようにしたいです。可能であれば、これに対する css ソリューションを見つけたいと思います。

理解を深めるために、ここでいくつかの例の剣を作成しました: http://jsfiddle.net/jbraccini/jyuKL/8/

最終結果は次のようになります: http://www.jbraccini.com/files/final.jpg

とにかく、誰かが私を啓発できることを願っています。

よろしくお願いします！

J

4

1 に答える 1

2

これを試して：

.container {
    width:   300px;
    height:  500px;
    background-color: red;
    overflow: hidden;
    position:relative;
}

.bgimg {
    width:   300px;
    height:  100%;
    background: url("http://www.jbraccini.com/files/bg.jpg") no-repeat left top;
}

.shadow {
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: url("http://www.jbraccini.com/files/container-shadow.png") no-repeat right top;
    position: absolute;
    z-index:2;
}

</ p>

于 2012-12-06T20:35:18.383 に答える