CSS 레이아웃 CSS 및 HTML

Question

간단한 페이지 (HTML 및 CSS 만 사용)를 만들려고하고 있지만 일부 요소에 어려움이 있습니다. 여기에서 달성하고자하는 것과 첨부 한 링크를 첨부했습니다.

질문은 다음과 같습니다

1. 어떻게 분홍색 배경 모든 텍스트와 이미지를 겹쳐 넣을 수 있습니다?

• 나는 CSS에서이 작업을 수행하려고 :

  #setBackground {
position:absolute; left:0px; top:0px; z-index:-1;
}

• 그리고 HTML에서 :

  <div id="setBackground">
<img src="/images/pinkbg.png" alt="Background"/> </div>

• 하지만 여전히 didnt 한 일을.

나는 그것이 공상 아니지만, 누군가가 내게 줄 수있는 몇 가지 제안을 주시면 감사하겠습니다. 감사. 이미지이다 CSS 파일

에서 Z- 색인 구문

Answer 1

분홍색은 겹치지 않지만 underneath이므로 투명한 물건을 올려 놓으면 분홍색이 보입니다. 이 경우에는 핑크 색상이 여기

background-color: rgb(245,195,195); 

을 필요 설정은 배경 레이아웃하는 방법의 예입니다 http://jsfiddle.net/EAHQw/6/

추가의 모든 콘텐츠는 두 사업부의의 내부에 갈 것을 따라서 배치된다 맨 위에 원하는 분홍색 배경을 제공합니다.

나는 더 완벽한 예를 찾아 갔다. http://jsfiddle.net/GEwYJ/2/

나는 원을 속이고 싶지만 3 차원 회전을 지원하는 이미지 편집 프로그램에서 그 이미지를 쉽게 만들 수 있습니다. 당신은 아마 순수한 CSS로 그것을 할 수 있지만, 나는 그것에 대한 변형으로 충분하지 않다 아마 그냥 이미지로 그것을하는 것이 더 간단합니다. 또한 상자의 내부에 잘 들어갈 수 있도록 작게 만들었습니다. 그것은 완벽한 사본이 아니지만 근사치로서 통과 할 수 있습니다.

또한 클래스 이름 ID와 psudo 선택자를 혼합하여 스타일을 적용하는 여러 가지 방법을 보여주었습니다. 프로덕션 환경에서는보다 일관된 구조를 갖는 것이 좋습니다.

Answer 2

1. .

    
   #box { 
   position: absolute; 
   width: 100%; 
   height: 20px; 
   background-color: red; 
   } 
   

4.

: 또는 당신은 그런 당신의 CSS 파일에서 '상자'또는 무엇인가라는 DIV 상자를 만들 ... CSS3로 ( www.w3schools.com)

그것을 시도 할 수 있습니다

position: absolute; 
width: 100px; 
height: 100px; 
top: 200px; 
left: 50px; 
background-color: black; (example... works with % instead of px, too) 

5.

margin: right; (CSS works only if your text is in a div-box) 

행운을 빌어 요