如何透明地遮盖对象，以便只有背景可见？

Question

目标

我想创建一个动画多边形，它的部分被修剪/剪切/遮蔽，因此它下面的图层/元素/背景可以像这样看到：

我用 CSS3 变换创建了一个动画。它是一个旋转块，看起来它的底部在移动时被修剪掉了。我希望修剪的部分显示旋转块背后/下方的实际内容（因此它的背景）。

我尝试了什么

幻觉解决方案

对于单色背景，您可以在动画顶部添加一个形状，使其具有被切断的错觉。

这显然不适用于图片：

有限的解决方案

如果您需要将矩形的边切掉，您可以通过父元素来完成，但这有明显的局限性。如何用任意多边形做这样的事情？可以用 CSS 遮罩吗？

body {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQYV2NMqL7ty4ADMIIkF7SqbsYmP+gkAbAbGgsk/ddhAAAAAElFTkSuQmCC);
}

.center {
  width: 200px;
  margin: 0 auto;
  padding-top: 50px;
  height: 100px;
  overflow: hidden;
}

.block {
  height: 100px;
  width: 100px;
  background-color: red;
  z-index: -1;
  transition: transform 1000s 0s linear;
  margin-left: 50px;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotating 2s linear infinite;
}

<div class="center">
  <div class="block rotate"></div>
</div>

Answer 1

要触发 z-index，您需要将位置重置为：相对、固定或绝对。

DEMO

#mask {
    height: 100px;
    width: 100px;
    background-color: white;
    z-index: 1;
    position:relative;/* to trigger z-index */
}

---

看起来像上一个示例，背景位置可能是有效的。 DEMO box cut off from background

基本上：

body {
    background: url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
    background-size:100vw auto;
    background-repeat: no-repeat;
}

#mask {
    height: 100px;
    width: 100px;
    background:url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
    background-size:100vw auto;
    z-index: 1;
    position:relative;
}

很遗憾，这不适用于background-size:cover;，因为body 和#mask 的大小不同。 background-size 需要通过 JavaScript 设置 onload 和 onresize for #mask。

Answer 2

你有没有试过用比红框更大的 z-index 让白框不可见？

Answer 3

给你：http://jsfiddle.net/QxG74/2/ 可爱的kitting版：http://jsfiddle.net/DpfW7/1/

将中心 div 的高度设为 100 像素，并将溢出设置为隐藏。这样旋转的正方形就在底部被修剪了。

#center {
   width: 200px;
   height: 100px;
   overflow: hidden;
}