来自倾斜容器的非倾斜背景图像[重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了来自倾斜容器的非倾斜背景图像[重复]相关的知识，希望对你有一定的参考价值。
我正在使div与transform: skew(-30deg)倾斜，问题是背景图像也倾斜了。如何仅将transform: skew(30deg)应用于背景图像？甚至更好地使歪斜忽略背景图片
.root {
width: 100%;
height: 300px;
overflow-x: hidden;
}
.container {
width: 131%;
height: 100%;
display: flex;
justify-content: center;
}
.card {
flex: 1;
color: white;
height: 100%;
display: flex;
transform: skew(-30deg);
align-items: center;
background-size: cover;
justify-content: center;
background-color: black;
transform-origin: top;
background-image: url(https://images.unsplash.com/photo-1507767439269-2c64f107e609?ixlib=rb-1.2.1&w=1000&q=80);
}<div class="root">
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>答案
Idk为什么但我必须将width属性放置在偏斜属性之后，否则它不起作用...但是，是的，这个想法非常简单，您可以在内部创建具有相反偏斜和可见溢出的元素。
.container {
width: 131%;
height: 100%;
display: flex;
justify-content: center;
}
.card {
flex: 1;
color: white;
height: 100%;
transform: skew(-30deg);
background-color: black;
transform-origin: top;
overflow-x: hidden;
}
.cont{
background-image: url(https://images.unsplash.com/photo-1507767439269-2c64f107e609?ixlib=rb-1.2.1&w=1000&q=80);
transform: skew(30deg);
width:220%;
height: 100%;
align-items: center;
background-size: cover;
justify-content: center;
background-color: black;
transform-origin: bottom;
overflow: visible;
}
.root {
width: 100%;
height: 300px;
overflow-x: hidden;
background-color: blue;
}<div class="root">
<div class="container">
<div class="card"><div class="cont"></div></div>
<div class="card"><div class="cont"></div></div>
<div class="card"><div class="cont"></div></div>
<div class="card"><div class="cont"></div></div>
<div class="card"><div class="cont"></div></div>
</div>
</div>以上是关于来自倾斜容器的非倾斜背景图像[重复]的主要内容，如果未能解决你的问题，请参考以下文章