проход HTML фоновое изображение от одного элемента к другому

Question

Допустим, у меня есть три уровня иерархии HTML код вида:

<section> 
    <div id="outer"> 
    <div id="inner"> 
    </div> 
    </div> 
</section> 

и я набор background-image:someImage.jpg к section и background:white к наружному дел. есть способ установить одно и то же изображение - someImage.jpg в качестве фона для внутреннего div. Но так, чтобы он фактически показывал фон из раздела, а не просто использовал одно и то же изображение дважды. часть iof внутренний div прозрачен и вместо того, чтобы видеть белый фон внешнего div, я хочу увидеть фоновое изображение раздела. предположить три элемента вида:

Answer 1

Вы хотите что-то вроде этого:

<section> 
    <div id="outer"> 
    <div id="inner"> 
    </div> 
    </div> 
</section> 

section, #outer, #inner { 
    padding: 20px; 
    display: block; 
} 

section { 
    background: url('http://st.depositphotos.com/1907633/3138/i/950/depositphotos_31380901-Abstract-metal-molecules-medical-background.jpg') no-repeat center center; 
} 

#outer { 
    background-color: rgba(255, 255, 255, 0.5); 
} 

#inner { 
    background-color: gray; 
} 

Ссылка на jsfiddle: http://jsfiddle.net/77xyo575/

Answer 2

Используйте границу для #outer, а не фон, и сделать #inner полупрозрачным. Например:

section { 
    float: left; 
    padding: 40px; 
    background: url(background image) repeat center center; 
} 

#outer { 
    border: 40px solid white; 
} 

#inner { 
    width: 60px; 
    height: 60px; 
    background-color: rgba(255, 255, 255, 0.5) 
} 

См this Fiddle.