배경 테두리가있는 HTML CSS 이미지

Question

CSS를 사용하여 아래 링크에서 테두리를 만드는 방법. http://themeforest.net/item/midway-responsive-travel-wp-theme/full_screen_preview/3559006?ref=magazinehive

Answer 1

background-image을 만들고 이미지를 넣을 수 있습니다.

또는

다른 z-index 일부 rectangulars의 DIV를 작성합니다. 사용 후 각 사각형 div에 rotate이 CSS 속성. 이 웹 사이트에

-moz-transform:rotate(-10deg); //firefox 
-webkit-transform:rotate(-10deg); //Chrome, Safari 
-o-transform:rotate(-10deg); //Opera 

예 : http://inspectelement.com/tutorials/create-the-illusion-of-stacked-elements-with-css3-pseudo-elements/

Answer 2

환상이다. 모든 그림에이 프레임이있는 것은 아니며 경계에 배경 이미지가 있고 그 안에 모든 내용을 배치합니다.

Answer 3

FireBug 또는 Chrome의 개발자 도구를 사용하여 어떻게 달성했는지 확인할 수 있습니다. 그들이 한 것은 여러 div를 만들고 CSS 변환을 사용하여 div를 다른 각도로 회전하여 효과를 만드는 것입니다.

샘플 : http://jsfiddle.net/ChbP7/

HTML 코드 :

CSS

<div style="padding: 20px;"> 
    <div class="main-slider-container fade-slider-container"> 
     <div class="fade-slider main-slider fade-effect"> 
      <div style="background-color: #EEE; height: 100px;"></div> 
     </div> 
     <div class="block-background layer-1"></div> 
     <div class="block-background layer-2"></div> 
    </div> 
</div> 

:

.main-slider { 
    border: 10px solid #fff; 
    overflow: hidden; 
} 

.main-slider-container .block-background { 
    position: absolute; 
    background: #fff; 
    width: 100%; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 

.fade-slider { 
    position: relative; 
    z-index: 5; 
} 

.fade-slider-container { 
    position: relative; 
} 

.main-slider, 
.fade-slider-container .block-background { 
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); 
    box-shadow: 0 0 5px rgba(0,0,0,0.3); 
} 

.fade-slider-container .layer-1 { 
    -ms-transform: rotate(1.2deg); 
    -webkit-transform: rotate(1.2deg); 
    -o-transform: rotate(1.2deg); 
    -moz-transform: rotate(1.2deg); 
    transform: rotate(1.2deg); 
} 

.fade-slider-container .layer-2 { 
    -ms-transform: rotate(-1.8deg); 
    -webkit-transform: rotate(-1.8deg); 
    -o-transform: rotate(-1.8deg); 
    -moz-transform: rotate(-1.8deg); 
    transform: rotate(-1.8deg); 
}