div 배경이 반복되는 div 안에 투명한 배경이있는 div

# div1 안에 # div1이 100 % 높이이고 # div2가 있습니다. # div2는 # div1의 상단에 위치하며 반투명 배경을 사용합니다. 그러나 # div1에는 반복되는 배경이 있기 때문에 # div2 아래의 반투명은 # div1의 배경입니다. 나는 #의 DIV2의 높이의 상단에서 #의 div1의 배경을 "이동"할div 배경이 반복되는 div 안에 투명한 배경이있는 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

. 이것이 당신에게 도움이 될지 모르겠지만, 함께 놀 수는 있습니다. 블록 레벨 정렬

<!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)을줌으로써 보여줄 작은 창. div1에서 그 이미지가 반복되지 않는 몇 가지 이유를 들어 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 안에 투명한 배경이있는 div

답변

관련 문제