2

我正在尝试为我的一个项目构建一个可扩展的幻灯片，但为了让我的 div 看起来像我预期的那样，我陷入了困境。

我有一个 div #container，它可以容纳另外两个 div：一个 #shadow div 和一个 #bgimg div。

<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，我计划检测 mouseover(hover) 和 mouseout 事件以扩展它并以更大的视角显示图像。

  • #shadow div 计划在 #bgimg 之上（在同一个位置但具有更高的 z-index），并且将具有右上对齐的透明 png(image) 作为背景图像，以模拟 #container内部阴影，因此幻灯片似乎（从视觉上讲）以某种方式物理嵌入页面主体。

最终结果将是改变#container 宽度，它也会改变#shadow 宽度，因为它的宽度设置为100%，因此，当#bgimg 未被覆盖时，它会将阴影定位到右上角。

我显然没有达到这样的结果：D #shadow div 保持在 #bgimg 之上，将其推到底部。我试图设置#shadow position: absolute; 但我希望不必通过代码更改#shadow 属性，如果可能的话，我想为此找到一个 css 解决方案。

为了理解的目的，我在这里创建了一些示例剑：http: //jsfiddle.net/jbraccini/jyuKL/8/

最终结果应该是这样的： http ://www.jbraccini.com/files/final.jpg

无论如何，我希望有人能启发我。

最好的祝福！

Ĵ

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