倾斜的容器中的直背景图像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

回答

相关问题