倾斜容器 CSS 中的直背景图像答案

【问题标题】：Straight background image in a skewed container CSS倾斜容器 CSS 中的直背景图像
【发布时间】：2015-05-14 12:24:37
【问题描述】：

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

问题是，我试图保持原始图像的比例，所以图像不会歪斜，而只是裁剪。

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

有一个彩色容器可以正常工作，但图像无法正确旋转。

如果有任何帮助，我将不胜感激！

【问题讨论】：

标签： html css background-image skew jquery-backstretch

【解决方案1】：

您需要在img 标记上应用转换。此外，您有两个#container div，id 应该是唯一的。 PS：你需要移除隐藏在 backstretch div 中的溢出，以便让倾斜的容器在图像底部可见。

【讨论】：

嗨，是的，对于双 ID 很抱歉，没看到。无论如何，它并没有真正影响结果。通过在图像标签上应用转换，它将不再是原始比例。