배경이 다른 두 개의 컨테이너를 만드는 방법은 무엇입니까?

가능한 중복은 :
Convert HTML + CSS to PDF with PHP?배경이 다른 두 개의 컨테이너를 만드는 방법은 무엇입니까?

내가 제대로이 작업을 수행 할 수있는 방법을 찾을 수 없습니다. 나는 두 개의 용기를 가지고있다. 하나의 컨테이너에서 전체 위쪽 절반을 가로 질러 가져올 배경 이미지를 사용하고 싶습니다. 그런 다음 두 번째 컨테이너를 사용하고 빨간색으로 색을 지정하고 싶습니다. 이것은 아래쪽 절반을 수평으로 가져갈 것입니다.

나는이 시도 :

HTML :

<div class="container1"> 
    Some text and other divs go here. This is where the background will be an image. 
</div> 
<div class="container2"> 
    Some text will also here along with divs. This is where I want to use the red background. 
</div>

CSS :

.container1 { 
     background-image: url('img.png'); 
     width:100%; 
    } 
    .container2 { 
     width: 100%; 
     color: #990000; 
    }

문제는 이미지 컨테이너 내가 정상에 공백 왼쪽하고 있다는 것입니다, 바닥, 왼쪽, 오른쪽.

어떻게 해결할 수 있습니까? 당신의 목적의 경우 a

출처

2012-11-22 KPO

를 사용하는 것을 방지 할 수 있습니다 d 이미지는 기본적으로 반복됩니다! 그래서 당신은 어떻게 거기에서 공백을 얻을 수 있습니까? – SaidbakR

하나의 경우 높이를 정의하지 않습니다. 그래서 "반"의 개념은 알려지지 않았습니다. 둘째, 방화 상자 또는 개발자 도구를 사용하여 이러한 컨테이너의 부모를 확인합니다. 나는 패딩에 간섭이있을 것이라고 내기한다. –

공백이'.container1' 안팎에 있는가? 'img.png'이란 무엇입니까? 흰색이 이미지의 일부가 아니라고 확신합니까? – Sparky

당신은 패딩을주고 같이 (모든 브라우저 별 기본 스타일 시트의 행동을 제거하는 CSS 리셋으로 알려진 사용합니다 0 가장 경험이 풍부한 UI 개발자에 패딩과 마진을 설정해야

기본 CSS 리셋 :.. CSS 파일의 시작 부분에

body { padding: 0px; margin: 0px;} 
div { padding: 0px; margin: 0px; }

이, 도움이

또한, CSS color은 TEH 텍스트 색상 관련이 아닌 배경 색상 당신은 background-color를 사용해야합니다. 당신이 반 제대로 정의되지했기 때문에

출처

2012-11-22 00:45:28

감사합니다. @mike. 그게 효과가 있었어. 후속 질문이 있습니다. 이렇게하면 이미지가 페이지 절반 만 차지하게됩니다.하지만 20px까지 수직 범위를 확장하고 싶다고 가정 해 봅시다. 어떻게해야합니까? 확장하려면
태그를 사용했습니다. 다른 방법이 있습니까? – KPO

@KPO 'height' CSS 속성을 사용하여 높이를 명시 적으로 설정할 수 있습니다. –

감사합니다. 훌륭한 CSS를 배울 수있는 곳이 있습니까? 나는 초보자이다. 내가 아마추어 수준에 있다는 것을 알면, 전문가가 아닌 일을하는 법을 배웠습니다. – KPO

, 나는 코드가 background-color를해야 color를 제외하고 괜찮 말할 것이다; 당신은 화면의 측면에서 절반을 의미하는 경우에 당신이 절대 위치을 사용할 필요가 미세 여기 http://jsfiddle.net/TkBxH/

작업 참조 CSS는

.container1, .container2 { 
    position: absolute; 
    left:0; 
    right:0; 
    height:400px; /* based on screen size */ 
} 
.container1 { 
    top: 0; 
} 
.container2 { 
    bottom: 0; 
}

편집 될 것이다 : 당신이 마음을하지 않는 경우 <body>에 절대 위치 (.container1, .container2의 부모) 당신은 내가 그 backgroun에 생각 픽셀 값을

body { /* Force <body> to fill screen */ 
    position: absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
} 
.container1, .container2 { 
    height:50%; 
}

출처

2012-11-22 00:46:38

배경이 다른 두 개의 컨테이너를 만드는 방법은 무엇입니까?

답변

관련 문제