Question

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

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

左幕，舞台和右幕在屏幕中间保持固定宽度。如果浏览器水平扩展，则外部“窗帘重复”需要锚定到它们各自的窗帘，但是向浏览器的外部重复。效果是边对边幕帘幕帘。

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

我还在学习css技巧，但我可以使用一个快速启动，因为这比我的经验水平更复杂。在此先感谢您的帮助。

Answer 1

这是一个没有图像的基本结构，只有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中的所有内容嵌套在div中，这样您就可以为合成指定一个设置高度。如果没有必要，可以随意移除那个级别的收容，只需使用“身体”作为重复的背景幕。 Lemme知道你有什么问题和好运！：）

css布局 - 重复背景＆amp;重叠的图像

1 个答案: