如何爲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設置變換而不影響背景圖片？

回答

相關問題