css佈局 - 重複背景和重疊圖像

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

我嵌套所有這些內容都是在div中的這樣你就可以爲你的作文指定一個高度。如果這不是必要的，隨時取消這一級別的遏制，並只使用「身體」作爲你的重複背景幕。讓我知道你是否有任何問題和祝你好運！ :)