Question

请看一下图片 The Problem

我的挑战如下。蓝色是带背景图像的div。角度应为-6度。在这个div中我们有透明的png（这里是2个人）。允许人民头部^^°离开div。但不是腿。并且应该对图像进行动画处理，以便它们可以从左向右“行走”。

问题对我来说，我不知道如何将头部归档，可以“离开”盒子，但腿需要隐藏“溢出”。

蓝框的宽度应为100％，因此将-6deg旋转到div并且+ 6deg对人不起作用。

谢谢你的帮助。如果不清楚我的问题是什么，那就问问吧。英语不是第一语言^^谢谢。

编辑：没有“封面”div。我需要看到一个渐变。蓝色上方和下方的白色区域必须是透明的。

EDit2: I think i got it ^^ Look at this Thanks to SD. !

https://jsfiddle.net/rsr04udj/

Answer 1

你可以尝试一些技巧来遮盖腿而不是头部。请检查此演示我已创建仅包含文本的小示例。您可以用您拥有的图像替换文本。

<div class="wraper">
    <div class="whitebar">
        <div class="people">PEOPLE</div>
    </div>
</div>

Demo

Answer 2

你可以使用z-index和pseudo元素的组合来实现这种功能，这意味着你可以将它夹在一个偏斜的伪后面并且在另一个前面，将它夹在后面，创建这个'底部隐藏并且顶部显示'效果：

JsFiddle Demo

Demo Snippet （全屏查看代码段）

.people {
  background: url(http://fs2.directupload.net/images/150304/f48hrkmk.png) no-repeat;
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 7;
  transition: all 6s;
}
.wrap:hover .people {
  left: 100%;
}
.wrap {
  height: 400px;
  width: 100%;
  position: relative;
  background: lightblue;
  overflow: hidden;
}
.wrap:before {
  height: 50%;
  width: 100%;
  content: "";
  position: absolute;
  top: -20%;
  z-index: 6;
  left: 0;
  -webkit-transform: skewY(-6deg);
  -moz-transform: skewY(-6deg);
  transform: skewY(-6deg);
  background: white;
}
.wrap:after {
  height: 50%;
  width: 100%;
  content: "";
  position: absolute;
  bottom: -20%;
  z-index: 8;
  left: 0;
  -webkit-transform: skewY(-6deg);
  -moz-transform: skewY(-6deg);
  transform: skewY(-6deg);
  background: white;
}

<div class="wrap">
  <div class="people"></div>
</div>

Answer 3

<div class='wrapper'>

    <div class='blue-container'>
        <div class='people></div>
    </div>   //remove overflow hidden

    <div class='bottom-div></div> // use this div to hide the legs
                                     z-index: 100;

</div> // make this overflow : hidden

Answer 4

我看到您的代码中没有 .wrapper 类的相对位置。当您将某些内在孩子用作绝对值时，这是一个问题有时可能是出现此类问题或不需要的滚动条的原因。如果没有相对父级，则绝对值将相对于窗口。

（如果出现不需要的滚动条：在某些情况下，您希望父级隐藏溢出并使用滚动条绝对显示我看到有些人使用将溢出放在 html 和正文上，在我看来这是不好的做法，但它可能会导致更多问题而不是好处，但这不是您的情况）。

在你的情况下：

const yearsOption = document.querySelector(".select");

yearsOption.addEventListener("change", function(e) {
  const year = e.target.value;

  document.querySelectorAll('.table > div').forEach(function(item) {
    item.style.display = (item.classList.contains(year) ? 'flex' : 'none');
  })
});

隐藏在底部的CSS HTML Angled Div with Overflow

4 个答案: