DIV 테두리의 위쪽과 아래쪽에 다른 이미지가 있습니다.

Question

저는 작업중인 사이트가 있으며 요구 사항 중 하나는 클라이언트 측 스크립팅 (jQuery/JavaScript)을 사용할 수 없다는 것입니다. 그리고 내가 이 아니기 때문에은 CSS와 잘 어울립니다. 저는 여기 조금 붙어 있습니다.

나는 "테두리 이미지"가 있어야하는 간단한 div가 있습니다. 그러나 CSS (border-image)는 IE (이미 테스트 한)에서 작동하지 않으므로 background-image:과 작동하는 상단과 하단의 두 가지 이미지를 얻을 수 없으므로 사용할 수 없습니다. 이제는 내가 할 수있는 것을 궁금하게 남았습니다. 이러한 목표를 달성하기 위해 어떤 방법이 있나요

:

다음

그것과 같아야 것입니다, 모두 화살표 보이는 일이 2 개 PNG 파일입니다 ... 무엇입니까? 1 div와 2 개의 이미지 만 사용하면됩니까? 자바 스크립트를 사용하지 않고 브라우저 간 호환성을 유지합니다 (예 : ie6 <).

Answer 1

이 작동 : IE9, 파이어 폭스, 크롬, 오페라와 사파리

CODE :

<style> 
     #Container { 
     width: 400px; 
     height: 400px; 
     margin-left: auto; 
     margin-right: auto; 
     border:1px solid #000000; 
     } 


     .boxTop { 
     position: relative; 
     left: 100; 
     top: 100; 
     width: 200px; 
     height: 10px; 
     background-color:#00CC00; 
     /*place background image css code here and remove line above*/ 
     } 

     .box { 
     position: relative; 
     left: 100; 
     top: 100; 
     width: 200px; 
     height: 200px; 
     background-color:#CC0000; 
     } 

     .boxBtm { 
     position: relative; 
     left: 100; 
     top: 100; 
     width: 200px; 
     height: 10px; 
     background-color:#0000CC; 
     /*place background image css code here and remove line above*/ 
     } 
    </style> 

    <div id="Container"> 
     <div class="boxTop"></div> 
     <div class="box"></div> 
     <div class="boxBtm"></div> 
    </div> 

Answer 2

Darcey의 솔루션은 매우 좋다. 박스 div는 내부에 3 개의 div가 있고, 중간에는 내용 용이고 나머지 2 개는 이미지 용입니다 (CSS 속성 background-image 사용).

당신이 CSS를 가지고 노는 시도 할 수 귀하의 HTML을 수정하지 않으려면 : 전 : Example

Answer 3

먼저 해결 한 후 : 단지 gradient의를 사용합니다. 이미지가 없거나 추가 요소가 없거나 가상 요소가 있습니다.

물론 gradient은 IE9 이하에서 지원되지 않으므로 다른 해결책은 여러 배경을 사용하는 것입니다..

IE8 이상 여러 배경에게 CSS3 방법를 지원하지 않지만이 브라우저에 대한 대체로서 AlphaImageLoaderfilter을 사용할 수 있습니다.

Answer 4

블록이 height 및 으로 고정 된 경우 배경 이미지 1 개를 설정하고 padding 초로 설정하십시오. 고정 된 경우 width @Mr을 사용하십시오. 에이리언의 해결책. 그리고 height 자르기 이미지를 가로로 고정하고 배경을 repeat-x으로 만들면. width과 height 둘 다 동적이라면 2-3 개의 div를 사용하는 것이 좋습니다. 나는 이것을 피하기를 원합니다. :before과 :after이 더 좋다고 생각합니다.