0

我被要求设计一个看起来像舞台的页面。图形元素排列如下：

[curtain repeat][left curtain][stage][right curtain][curtain repeat]

左幕、舞台和右幕在屏幕中间保持固定宽度。如果浏览器水平展开，外部的“幕布重复”需要锚定到它们各自的幕布上，但朝着浏览器的外部重复。效果是边缘到边缘的幕布舞台幕布。

现在，我需要实现的另一个技巧是左右窗帘覆盖或重叠舞台。因此，如果我将一个元素放置在舞台右侧很远的位置，“右幕”的一部分将与它重叠，就好像该元素部分位于幕后一样。

我仍在学习 css 技巧，但我可以使用跳跃开始，因为这超出了我的经验水平。在此先感谢您的帮助。

4

1 回答 1

0

这是一个没有图像的基本结构，只有 bkg 颜色：

http://jsfiddle.net/dtYKL/

HTML：

<div class="theatre">

    <div class="content">
        <div class="curtain left">left curtain</div>
        <div class="stage">stage!</div>
        <div class="curtain right">right curtain</div>
    </div>

</div>

CSS：

body, html{
    margin:0;            
    width:100%;
    height:100%;
}

.theatre{
    width:100%;                
    background:#369; /* this is where you'd add your repeating curtain bkg */
}

.theatre .content{ /* this is your fixed-width stage content */
    position:relative;            
    width:600px;
    height:400px;
    margin: 30px auto; /* centers the content */        
}

.content .curtain{ /* set your common styles, dimensions, positions for left + right curtains */
    position:absolute;    
    width:100px;
    height:100%;
    text-align:center;    
}

.content .left.curtain{ /* position and add image for left curtain */
    left:0;
    top:0;    
    background:#963; /* this is where you'd add your left curtain image */
}

.content .right.curtain{ /* position and add image for right curtain */
    right:0;
    top:0;    
    background:#963; /* this is where you'd add your right curtain image */
}

.content .stage{
    width:100%;
    height:100%;
    border-bottom:5px solid #000000; /* this will simulate a stage floor, you can use a solid bkg image if you want */
    box-sizing:border-box; /* this is so the border added above won't add to the div height */
    background-color:#888888; /* this is the stage background */    
    text-align:center;    
}

​我将所有的内容都嵌套在一个 .theatre 类的 div 中，这样你就可以为你的作品指定一个设定的高度。如果这不是必需的，请随意移除该级别的收容并仅使用“身体”作为重复背景幕。如果您有任何问题，请让我知道，祝您好运！:)

于 2012-11-06T17:14:24.723 回答