如何在倾斜图层（CSS）中纠正背景图像？

Question

我试图显示像这样的个人资料照片/ - （斜线表示使用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> 

...但我得到/ [ - ] /（背景不适合倾斜）。

我一直在这一整天，请你能帮助我吗？我有编码器的博克！

Answer 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 */ 
}