我正在尝试显示像这样的个人资料照片/ – /(斜线表示使用skewX的斜线,连字符表示水平对齐的背景图像). 问题是这段代码也会扭曲背景图像： .photo {transform: ske
...我正在尝试显示像这样的个人资料照片/ – /(斜线表示使用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> …但我得到/ [ – ] /(背景不适合斜面).
我整天都在这,请你能帮助我吗？我有编码器的笨蛋！
.解决方法
. 我宁愿使用一个持有背景图像的伪元素.解决方案的关键是使用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 */}. ..
