如何为div设置变换而不影响背景图片？

我想通过扁平（true）背景图像创建一个平行四边形对象。如何为div设置变换而不影响背景图片？

HTML：

<div class="q-item"></div>

CSS：

.q-item { 
    width: 180px; 
    height: 132px; 
    background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 13px 1px; 
    float: left; 
    margin-left: 58px; 
    padding-right: 1%; 
    border: 2px solid #1D2A3D; 
    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
}

请参阅我的样品在jsfiddle

如何设置变换div但不影响对象的这个元素和泛白的效果，在此上背景？

来源

2014-09-29 MahEs

拉胡尔这个questins不能帮助我。 – MahEs 2014-09-29 20:20:42

这是什么http://stackoverflow.com/questions/18289643/how-do-i-unskew-background-image-in-skewed-layer-css – 2014-09-29 20:23:03

是的！这就像showdev的答案，它运作良好。 :)谢谢，这个问题将被删除 – MahEs 2014-09-29 20:25:47

我已成功添加伪元素::before，将background-image移动到该伪元素，并应用反向倾斜来抵消原始倾斜。

这是基于sitepoint.com的解决方案。

.q-item { 
    width: 180px; 
    height: 132px; 
    float: left; 
    margin-left: 58px; 
    padding-right: 1%; 
    border: 2px solid #1D2A3D; 
    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -ms-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    transform: skew(-20deg); 
} 

.q-item::before { 
    content:""; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 33px 1px; 
    -webkit-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -ms-transform: skew(20deg); 
    -o-transform: skew(20deg); 
    transform: skew(20deg); 
}

WORKING EXAMPLE

来源

2014-09-29 20:13:06 showdev

该问题已被标记为重复。重复的帖子有一个类似于我的答案。我会在几分钟内删除我的答案。 – showdev 2014-09-29 20:14:33

非常感谢，请删除它。 – MahEs 2014-09-29 20:21:28

如何为div设置变换而不影响背景图片？

回答

相关问题