Можно ли переопределить фон родительского элемента, чтобы показать фон элемента grandparent?

Question

Предположим, у меня есть следующие:

<div id="grandparent" style="background:some-image"> 
<div id="parent" style="background-color:white"> 
    <div id="child" style="something"> 

    </div> 
</div> 
</div> 

Можно ли использовать CSS в #child переопределить белый фон из #parent и показать изображение из #grandparent?

(Это для параллакса прокрутки эффекта, где просто удаление #parent не вариант)

Заранее спасибо!

Answer 1

Нет, DIVs не действуют как маски в Photoshop. Но то, что вы можете сделать, это подражать этому эффекту, разместив одно и то же фоновое изображение для дедушки и дедушки, используя background-position: fixed и добавив соответствующее смещение фона или, если хотите, с помощью JS для динамического пересчета смещения заднего фона в зависимости от его относительного положения к бабушке и дедушке - это не так сложно, как кажется.

Кроме того, есть CSS3 позиционирование bachround, как это background-position: calc(100% - 20px) calc(100% - 10px);