我如何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屋!