傾斜的容器中的直背景圖像CSS

我試圖創建一個旋轉的容器，它可以接受背景圖像。傾斜的容器中的直背景圖像CSS

事情是，我試圖保持原始圖像的比例，所以圖像沒有傾斜，但只是裁剪。

這裏是我已經成立了一個小提琴： http://jsfiddle.net/RyU9W/38/

HTML：

  <div id="container" class="color-container"> 
      <p>Colored Container</p> 
     </div> 


<div class="sep"></div><div class="sep"></div> 

     <div id="container" class="image-container"> 
      <p>Image Container</p> 
     </div>

CSS：

p {padding: 250px 0;} 
.sep {margin: 250px 0;} 


#container{background:none; position:relative;} 

#container:before { 
    content: ""; 
    position:absolute; 
    display:block; 
    width:100%; 
    height:100%; 
    padding: 100px 0; 
    z-index:-1; 
    -webkit-transform: skew(0deg, 4deg) translateZ(0); 
    transform: skew(0deg, 4deg) translateZ(0); 
} 


.color-container:before {background: royalblue;}

有其正常使用着色的容器，但與圖像它不會正確旋轉。

我很感激任何幫助！

來源

2015-05-14 tlt2w

您需要對img標籤應用變換。另外，你有兩個#container divs，id應該是唯一的。 PS：您需要清除backstretch div中隱藏的溢出，以便在圖像底部顯示傾斜的容器。

來源

2015-05-14 12:32:56

嗨，對於雙ID是抱歉，沒有看到。總之，這並不影響結果。通過在圖像標籤上應用轉換，它不會再處於原始比例。 – tlt2w

傾斜的容器中的直背景圖像CSS

回答

相關問題