Question

我想通过平面（真实）背景图像创建平行四边形对象。

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的变换而不影响此元素上的对象和此背景的白化效果？

Answer 1

我成功地添加了一个伪元素::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

如何设置div的变换而不影响背景图像？

1 个答案: