Question

我正在尝试为我的一个项目构建一个可扩展的幻灯片，并且为了按照我的预期出现，我陷入了设计我的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，我计划检测鼠标悬停（hover）和mouseout事件，以便扩展它并以更大的视角显示图像。
#shadow div计划在#bgimg之上（在同一个地方，但z-index更高），并且将右上对齐的透明png（图像）作为背景图像为了模仿一个#container内部阴影，所以幻灯片放映似乎（以视觉方式）以某种方式嵌入在页面主体上。

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

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

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

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

无论如何，我希望有人能够让我高兴。

祝你好运！

Ĵ

Answer 1

试试这个：

.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;
}

DIV内的DIV以上的HTML DIV

1 个答案: