신체의 배경 이미지 위에 배경 이미지를 배치하려면 어떻게합니까?

body 및 .wrap에 배경 이미지를 설정했습니다. 내 질문은 어떻게 그들 위에 배경을 둘 것인가? 그것은 CSS로 끝났지 만 아직 이해하지 못했습니다.신체의 배경 이미지 위에 배경 이미지를 배치하려면 어떻게합니까?

난 당신을 감사

http://jsfiddle.net/7sdnU/에 내 모든 코드를 넣습니다. z-index와

<body> 
    <div class="wrap"> 
    </div> 
</body>

출처

2011-10-31 JohnQ

위에 표시하려는 이미지는 zindex로 시도하십시오. – Unknown

은 : 당신이 다시 하나 개의 요소를 배경 레이어를 이동할 수 있도록 http://jsfiddle.net/7sdnU/2/

출처

2011-10-31 08:42:24 Mathieu

고맙습니다! 그러나 그것은 이미지, 텍스트 상자 등등을 뛰어 넘습니다. 나는'.image { z-index : 2; }'행운을 빌어 요. 나는 여기에 바이올린을 업데이트했다. http://jsfiddle.net/7sdnU/14/ – JohnQ

? http://jsfiddle.net/7sdnU/16/ – Mathieu

html 요소는 또한, 스타일을 지정할 수 있습니다. 이런 식으로 뭔가 :

html { 
    background:url(bottom-background.png); 
} 
body { 
    background:url(middle-background.png); 
} 
wrap { 
    background:url(top-background.png); 
} 
/* Make sure everything takes up the whole viewport */ 
html, body, .wrap{ 
    height:100%; 
    width:100%; 
    padding:0; 
    margin:0; 
}

데모 : http://jsfiddle.net/7sdnU/15/

또한 또 다른 래퍼 DIV 추가 할 수

<body> 
    <div class="wrap"> 
     <div class="inner"> 
     </div> 
    </div> 
</body>

그런 다음 그러나 .inner

에 "최고"배경 적용을, CSS3 multiple backgrounds이 허용됩니다. 따라서이 기능을 사용하는 것이 가장 좋은 해결책이지만 완전히 지원되지는 않습니다.

출처

2011-10-31 08:45:37

테스트를 마친 후에는 대각선 배경이 전체 문서가 아니라 줄 바꿈 만됩니다. – JohnQ

확인 하시겠습니까? '.wrap'의 높이와 너비를 100 %로 설정해야합니다. CSS3를 사용할 수 있다면 여러 배경을 사용하는 것이 좋습니다. 내 인터넷은 데모를 수정할 수 없으므로 유감스럽게 생각합니다. –

데모 및 게시물을 업데이트하여 시도해보십시오. 아직 보이지 않는 부분이 있습니다. 이미지가 너무 작고 섬세합니다. 내 연결 상태가 좋지 않아 데모를위한 더 좋은 이미지를 찾을 수 없습니다. –

신체의 배경 이미지 위에 배경 이미지를 배치하려면 어떻게합니까?

답변

관련 문제