Question

所以，我试图将图像放在这些偏斜的盒子中，这些盒子本身就是div。 https://i.gyazo.com/40b075146572cb239155ecbe8c782162.png

目前，当我尝试将图片放入其中时，它们重叠如下：https://gyazo.com/8b7eb84bf60385d30661eed771323d9b

我假设溢出：隐藏;会做到这一点，但没有骰子。有什么想法吗？

.wiki {
  grid-column: 2/3;
  grid-row: 2/3;
  font-family: 'Gentium Basic', serif;
  color: var(--cBlack);
  padding: 0.8em;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  width: 170px;
  height: 300px;
  padding-top: 5em;
  background: #fff;
  -webkit-transform: skewY(-15deg);
  transform: skewY(-15deg);
}

.wiki header {
  -webkit-transform: skewY(15deg);
  transform: skewY(15deg);
  z-index: 2;
}

.wiki img {
  -webkit-transform: skewY(15deg);
  transform: skewY(15deg);
  overflow: hidden;
  z-index: 1;
  overflow: hidden;
  position: relative;
  height: 445px;
  bottom: 115px;
  right: 12px;
  opacity: 0.2;
}

<div class="wiki">
  <section>
    <header class="col-head">WIKI</header>
    <figure><img src="https://placehold.it/800x800" alt="Wiki image" class="cover"></figure>
  </section>
</div>

Answer 1

您应该在偏斜元素（overflow: hidden）而不是.wiki

上使用img

body {
  background: black;
}

.wiki {
  grid-column: 2/3;
  grid-row: 2/3;
  font-family: 'Gentium Basic', serif;
  color: var(--cBlack);
  padding: 0.8em;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  width: 170px;
  height: 300px;
  padding-top: 5em;
  background: #fff;
  -webkit-transform: skewY(-15deg);
  transform: skewY(-15deg);
  overflow: hidden;
}

.wiki header {
  -webkit-transform: skewY(15deg);
  transform: skewY(15deg);
  z-index: 2;
}

.wiki img {
  -webkit-transform: skewY(15deg);
  transform: skewY(15deg);
  z-index: 1;
  position: relative;
  height: 445px;
  bottom: 115px;
  right: 12px;
  opacity: 0.2;
}

<div class="wiki">
  <section>
    <header class="col-head">WIKI</header>
    <figure><img src="https://lorempixel.com/800/800/" alt="Wiki image" class="cover"></figure>
  </section>
</div>

在div中相交图像

1 个答案: