2014-12-22 2 views
0

enter image description here


우선 나는이 모든 것을 처음 접한다고 말하고 싶습니다. 그래서 여기에 내 상황이있다.부모 (. 래퍼) 배경 설정 건너 뛰기/무시

전신용 배경 이미지를 설정했습니다. 모든 제 페이지에 div .wrapper가 있습니다. 주요 목적은 콘텐츠를 중앙 집중식으로 정리하고 유지하는 것입니다. 배경색이 회색으로 설정되어 있습니다. div .wrapper 안에 또 다른 div .example이 있습니다.

이 특정 div .example은 .wrapper의 색상이 아닌 본문의 배경 이미지를 가져오고 나머지 .wrapper 속성은 유지합니다. 가능한가? 나는 몸의 나는 그것이 "외국"개체처럼 보여줍니다 생각하기 때문에 ...이를 달성하기

<html> 
... 
<body> 
<div class="wrapper"> 
    <div class="example"> 
     <img src="example.png"> 
    </div> 
</div> <!-- Wrapper --> 
</body> 
</html> 

body { 
    background: #ffffff url("bg.jpg") repeat; 
    background-size: 4%; 
    background-position: center; 
} 

.wrapper { 
    width: 80vw; 
    margin: auto; 
    padding: 0px 0px; 
    background: #e9eaed; 
    display: block; 
} 

.example { 
    width: 100%; 
/* background-color: #f6c5b6;*/ 

} 

.example img { 
    width:40%; 
    margin: 40px auto; 
    display: block; 
} 
+0

어 ... 당신이 얻을하려고 확실하지. 문자 적으로는 불가능합니다. div.example의 배경 이미지를 설정하고'background-position : xpx ypx; '를 사용하여 일치 시키십시오. 나는 이것이 최선의 방법이 될 것이라고 생각한다. – aahhaa

+0

푸른 색과 빨간색 줄무늬가있는 배경 이미지가있다. 그것의 목적은 화면의 양쪽에 표시하는 것입니다 (외부 래퍼). 나는 내게 가장 잘 맞는 것이 시각적으로 4 %로 설정한다는 것을 알았다. 내 .example div에 동일한 배경을 넣으면 두 배경이 일치하지 않습니다. 나는 그것들을 하나의 커다란 배경으로 보이기를 원한다. 이 페이지의 래퍼를 건너 뛰고 좋아하는 이미지 크기로 새 클래스를 설정하면 원하는 출력이 표시됩니다. 하지만 어떻게 든 래퍼의 배경을 건너 뛰기로 선언 할 수 있는지 궁금합니다. img – Tsafou

+0

샘플 이미지를 추가합니다. 달성하고자하는 것이 있다면 알려주세요. – aahhaa

답변

1

유일한 방법은 당신의 사업부를 구축하는 것입니다과 동일 .EXAMPLE의 배경 이미지를 설정할 수 없음을 시도하지 그것 주위.

.body { 
 
    background-image: url('http://placekitten.com/g/40/40'); 
 
    width: 500px; height:700px; background-repeat:repeat; 
 
} 
 
.wrapper { 
 
    width:300px; height:50px; background:grey; margin:0 auto;  
 
} 
 
.mask { 
 
    width: 300px; height:100px; margin:0 auto; 
 
} 
 
.left { 
 
    width: 50px; height:100px; float:left; background:red; 
 
} 
 
.right { 
 
    width: 50px; height:100px; float:right; background:red; 
 
}
<div class='body'> 
 
    <div class="wrapper"> 
 
     box 1 
 
    </div> 
 
    <div class="mask"> 
 
     <div class="left"> 
 
      box 2 
 
     </div> 
 
     <div class="right"> 
 
      box 3 
 
     </div> 
 
    </div> 
 
    <div class="wrapper"> 
 
      box 4 
 
    </div> 
 
    
 
</div>