我如何unskew歪斜层（CSS）的背景图像？ [英] How do I unskew background image in skewed layer (CSS)?

问题描述

我想显示个人资料照片像这样的/ - /（斜线再次使用如果skewX present偏，连字符重新presents水平对齐的背景图片）

I'm trying to display a profile photo like this / - / (the slashes represent slants using skewX, the hyphen represents a horizontally-aligned background image).

问题是，这个code也歪向背景图片：

The problem is that this code also skews the background image:

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

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

I've tried to reverse the background skew like this:

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

...但我获得/ [ - ] /（背景不适合于偏平）

...but I get / [-] / (the background doesn't fit flush to the slants).

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

I've been at this all day, please can you help me? I've got coder's bock!

推荐答案

我宁愿使用的控股背景图像伪元素。到解决方案的关键是使用变换原产地：

I'd rather use a pseudo element that's holding the background-image. The key to the solution is using transform-origin:

<大骨节病> 例

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

这篇关于我如何unskew歪斜层（CSS）的背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！