倾斜的容器中的直背景图像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;}
有其正常使用着色的容器,但与图像它不会正确旋转。
我很感激任何帮助!
答
您需要对img
标签应用变换。 另外,你有两个#container divs,id应该是唯一的。 PS:您需要清除backstretch div中隐藏的溢出,以便在图像底部显示倾斜的容器。
嗨,对于双ID是抱歉,没有看到。总之,这并不影响结果。 通过在图像标签上应用转换,它不会再处于原始比例。 – tlt2w