페이지 배경 하단 왜곡

Question

일부 코드를 사용하여 페이지 배경의 뒤쪽을 비뚤어지게 만듭니다. 페이지 부분은 다음과 같다 :

HTML : 소자

 .section{ 
      width: 100%; 
      height: 100%; 
      padding-top: 80px; 
      background-repeat: no-repeat; 
      background-attachment: fixed; 
      background-size: cover; 
      background: #fff; 
      } 

     #Fleet { 
      font-size: 1.2em; 
      text-align: center; 
      background: #0C142b; 
     } 

     #Fleet::after{ 
     content: ''; 
     position: absolute; 
     background: inherit; 
     z-index: -1; 
     bottom: 0; 
     transform-origin: left bottom; 
     transform: skewY(3deg); 


     .thumbnail { 
      border: 1px solid #0C142b; 
     } 

     .thumbnail>img, .thumbnail a>img { 
      margin-right: auto; 
      margin-left: auto; 
      border-radius: 4px; 
     } 

나머지 (행, 컨테이너와 같은) 부트 스트랩 CSS를 사용

 <div id="Fleet"> 
     <div class="section Fleet_section"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1><?php echo FLEET; ?></h1> 
       </div> 
      </div> 

       <div class="row top-buffer"> 

        <div class="col-sm-6 col-md-4"> 
        <div class="thumbnail Staffinview1 delay0_5s"> 
         <img src="./images/xxxx.jpg"> 
         <div class="caption"> 
         <h3>XXXX</h3> 
         </div> 
        </div> 
        </div> 


        <div class="col-sm-6 col-md-4"> 
        <div class="thumbnail Staffinview1 delay1s"> 
         <img src="./images/yyy.jpg"> 
         <div class="caption"> 
         <h3>yyy</h3> 
         </div> 
        </div> 
        </div> 


        <div class="col-sm-6 col-md-4"> 
        <div class="thumbnail Staffinview1 delay1_5s"> 
         <img src="./images/zzz.jpg"> 
         <div class="caption"> 
         <h3>zzz</h3> 
         </div> 
        </div> 
        </div> 

       </div>  
     </div> 
     </div> 
    </div> 

및 CSS. 이제

나는 페이지 하단의 스큐를하고 싶지만 그렇지 비슷한 효과 여기처럼 ... 작동합니다 http://www.hongkiat.com/blog/skewed-edges-css/ 당신이 날 지원할 수 있습니까?

Answer 1

#Fleet::after 룰셋의 }이없고 display: block;이 없습니다. 또한 크기가 부족합니다 (예 : width:100%;height:100%;