Div с прозрачным фоном внутри div с повторяющимся фоном

У меня есть # div1 со 100% высотой и # div2 внутри # div1. # div2, расположенный в верхней части # div1 с полупрозрачным фоном. Но, поскольку # div1 имеет повторяющийся фон, полупрозрачный под # div2 является фоном # div1. Я хочу, чтобы "двигаться" фон # див1 от вершины высоты # div2Div с прозрачным фоном внутри div с повторяющимся фоном

see image

CSS:

#div1 { 
    border: none; 
    width: 812px; 
    height: 100%; 
    background-image: url(http://i.imgur.com/tcPWRzF.png); 
    background-repeat: repeat-y; 
    margin: 0 auto; 
} 
#div2 { 
    background-image: url(http://i.imgur.com/DnDnz22.png); 
    background-color: transparent; 
    background-position: center; 
    width: 812px; 
    height: 488px; 
}

HTML:

<div id="div1"> 
<div id="div2"> 
</div>

источник

2016-10-12 morganchees

Добавить код ... – Dekel

'# Div1 {фон положение: ?? ? px 0px] 'где' ??? '- высота' # div2'. – Xenos

Хорошо, я добавил код – morganchees

По какой-то причине, что изображение в див1 не повторяющимся. Я не знаю, будет ли это работать для вас, но вы можете поиграть с ним.

<!DOCTYPE html> 
<html> 
<head> 
<title>page title</title> 
<style> 
#div1 { 
    position: relative; 
    top: 75px; 
    border: none; 
    width: 812px; 
    height: 100%; 
    background-image: url(http://i.imgur.com/tcPWRzF.png); 
    background-repeat: repeat-y; 
    margin: 0 auto; 
} 
#div2 { 
    position: relative; 
    top: -75px; 
    background-image: url(http://i.imgur.com/DnDnz22.png); 
    background-repeat: no-repeat; 
    background-color: transparent; 
    background-position: center; 
    width: 812px; 
    height: 488px; 
} 
</style> 
</head> 

<body> 
<div id="div1"> 
<div id="div2"></div> 
</div> 
</body> 
</html>

источник

2016-10-12 18:08:43 nocturns2

Дают div1 маленькое окно, чтобы показать, предоставив ему padding-top. http://codepen.io/amishstripclub/pen/VKdjmr

#div1 { 
    padding-top: 488px; 
}

источник

2016-10-12 15:52:33

Не работает. Или, может быть, я что-то не понимаю. Если в коде заменить фоновое изображение, указанное выше (# div1 -http: //i.imgur.com/tcPWRzF.png, # div2 - http://i.imgur.com/DnDnz22.png), ситуация такова: http://take.ms/zeJkr – morganchees

попытка Flexbox альтернативой для выравнивания уровня блока

#div1 { 
 
    border: none; 
 
    width: 812px; 
 
    min-height:1200px; 
 
    height: 100%; 
 
    background-image: url(http://i.imgur.com/tcPWRzF.png); 
 
    background-repeat: repeat-y; 
 
    margin: 0 auto; 
 
    display: flex;    /* establish flex container */ 
 
    align-items: center; 
 
} 
 
#div2 { 
 
    background-image: url(http://i.imgur.com/DnDnz22.png); 
 
    background-color: transparent; 
 
    background-position: center; 
 
    width: 812px; 
 
    height: 488px; 
 
}

<div id="div1"> 
 
<div id="div2"> 
 
</div>

PC: Michael_B

источник

2016-10-12 18:28:45 monikapatel

Div с прозрачным фоном внутри div с повторяющимся фоном

ответ

Смежные вопросы