css layout - повторяющиеся фоны и перекрывающиеся изображения

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 с классом .th eatre, таким образом вы можете указать высоту набора для своей композиции. Если это не является необходимым, не стесняйтесь удалить этот уровень сдерживания и просто используйте «тело» в качестве повторяющегося фонового занавеса. Лемме знаю, есть ли у вас какие-либо вопросы и удачи! :)