傾斜頁面底部的底部

-1

我正在處理一些代碼來扭曲底部的頁面背景。頁面部分是如下：傾斜頁面底部的底部

HTML：

 <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：

 .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（如行，容器）。

現在我想有在頁面底部的傾斜，但它不工作... 類似的效果就像這裏： http://www.hongkiat.com/blog/skewed-edges-css/ 你能支持我嗎？

來源

2016-10-21 wisnia80

'.section.Fleet：after'這是什麼？你的html代碼中沒有這樣的元素。並閱讀有關僞元素。你需要兩個冒號。 http://www.w3schools.com/css/css_pseudo_elements.asp – danny3b

嗨，感謝您發現錯誤。 Hovewer今天我回到主題並對代碼順序和類進行了一些更改。我仍然在尋找同樣的解決方案 - 在編輯的頂部可以找到更正的代碼。 – wisnia80

@ danny3b [not for'：after'。]（https://www.w3.org/TR/selectors/#pseudo-elements） – Walf

#Fleet::after規則集缺少其}並且沒有display: block;。它也缺乏尺寸，例如width:100%;height:100%;

來源

2016-10-22 13:36:35 Walf

傾斜頁面底部的底部

回答

相關問題