위쪽, 아래쪽, 왼쪽 및 오른쪽의 이미지 지정. 수행하는 방법?

Question

다음과 같이 CSS를 지정할 수 있습니다.

 
background: #CFCFCF url(button.bmp) repeat-x top; 

왼쪽, 오른쪽 및 아래쪽 이미지와 함께 상단 이미지를 원한다면 어떻게 할 것입니까?

Answer 1

html로

<div class="nice">... inner HTML goes here...</div> 

CSS의

.nice { 
    border: 1px solid #ffcf86; 
    padding-left: 50px; 
    padding-right: 50px; 
    background: url(i5.gif) no-repeat 50% 50%; 
} 

.nice:before, .nice:after { 
    display: block; 
    height: 41px; 
    margin-left: -50px; 
    margin-right: -50px; 
    font-size: 0; 
} 

.nice:before { 
    content: url(i1.gif); 
    background: url(i2.gif) no-repeat 100% 0; 
} 

.nice:after { 
    content: url(i3.gif); 
    background: url(i4.gif) no-repeat 100% 0; 
} 

결과 :

HTTP : //dense13.com/blogExamples/multiple-background-images-with- css2/desiredResult.gif

소스에 http : //dense13.com/blog/2008/08/31/multiple-background-images-with-css2/

올드 버전 : 당신의 조건에 따라 뭔가를 할 수 나타납니다

(

#some_id { 
    background-image: url('image_url'), url('another_image_url'); 
    background-position: top left,   top right; 
} 

소스 Quirksmode,이 Safari에서 작동 전용 (와 내가)에 대해 아래로 선정되었다 : 당신의 get 효과) 그 때문에 속성 값을 간격.

Answer 2

하나의 이미지를 표시하려면 일부 요소를 중첩해야합니다. Wayne이 말했듯이 요소에 대해 하나의 배경 이미지 만 지정할 수 있습니다 (더 많은 브라우저에서 CSS3까지 지원).

<div id="top"> 
    <div id="container"> 
     Put your content here 
    </div> 
    <div id="right"></div> 
    <div id="bottom"></div> 
</div> 

그런 다음 각 요소

#top {background: url(top.jpg) no-repeat;} 
#container {background: url(left.jpg) no-repeat;} 
#right {background: url(right.jpg) no-repeat;} 
#bottom {background: url(bottom.jpg) no-repeat;} 

에 CSS를 적용하고 또한 제대로 요소를 배치 할 필요가 ...