html中如何让图片斜显示,如何在偏斜层(CSS)中扭曲背景图像？

我正在尝试显示像这样的个人资料照片/ – /(斜线表示使用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;

}

...

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

.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;

}

...

…但我得到/ [ – ] /(背景不适合斜面).

我整天都在这,请你能帮助我吗？我有编码器的笨蛋！