偏斜的容器CSS中的直接背景图像

Question

我正在尝试创建一个可以接受背景图像的旋转容器。

事实是，我正在尝试保持原始图像比例，因此图像不会偏斜，而只是裁剪。

这是我设置的小提琴：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;}

有一个彩色容器，可完美地工作，但是使用图像无法正确旋转。

我感谢任何帮助！

Answer 1

您需要在img标签上应用转换。另外，您有两个#Container Divs，ID应该是唯一的。PS：您需要删除隐藏在仰移div中的溢出，以使图像底部可见偏斜的容器。