如何在倾斜图层 (CSS) 中取消倾斜背景图像？答案

【问题标题】：How do I unskew background image in skewed layer (CSS)?如何在倾斜图层 (CSS) 中取消倾斜背景图像？
【发布时间】：2013-08-17 14:01:25
【问题描述】：

我正在尝试显示像这样 / - / 的个人资料照片（斜线表示使用 skewX 的倾斜，连字符表示水平对齐的背景图像）。

问题是这段代码也歪斜了背景图片：

.photo {
transform: skewX(35deg); 
-ms-transform: skewX(35deg); /* IE 9 */
-webkit-transform: skewX(35deg); /* Safari and Chrome */
width: 100px; 
height: 92px; 
border-right: 1px solid black; 
border-left: 1px solid black; 
background-image: url('silhouette.png'); 
background-repeat: no-repeat; 
background-position: top left; 
}

...

<div class="photo"></div>

我试图像这样扭转背景倾斜：

.photo {
transform: skewX(35deg); 
-ms-transform: skewX(35deg); /* IE 9 */
-webkit-transform: skewX(35deg); /* Safari and Chrome */
width: 100px; 
height: 92px; 
border-right: 1px solid black; 
border-left: 1px solid black; 
}

.photo div {
transform: skewX(-35deg); 
-ms-transform: skewX(-35deg); /* IE 9 */
-webkit-transform: skewX(-35deg); /* Safari and Chrome */
width: 100%; 
height: 100%; 
background-image: url('silhouette.png'); 
background-repeat: no-repeat; 
background-position: top left; 
}

...

<div class="photo"><div></div></div>

...但我得到 / [-] /（背景不适合与斜面齐平）。

我整天都在这，请问你能帮帮我吗？我有编码员的力量！

【问题讨论】：

标签： css background skew

【解决方案1】：

我宁愿使用包含背景图像的伪元素。解决方法的关键是使用transform-origin：

Example

.photo {
    transform: skewX(35deg); 
    -ms-transform: skewX(35deg); /* IE 9 */
    -webkit-transform: skewX(35deg); /* Safari and Chrome */
    width: 100px; 
    height: 92px; 
    border-right: 1px solid black; 
    border-left: 1px solid black; 

    /* new styles */
    position: relative;
    overflow: hidden;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

.photo::before {
    content: "";
    transform: skewX(-35deg); 
    -ms-transform: skewX(-35deg); /* IE 9 */
    -webkit-transform: skewX(-35deg); /* Safari and Chrome */
    background-image: url('http://placekitten.com/200/200'); 
    background-repeat: no-repeat; 
    background-position: top left; 

    /* new styles */
    position: absolute;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    width: 1000%; /* something ridiculously big */
    height: 1000%; /* something ridiculously big */
}

【讨论】：