隐藏透明div后面的元素

Question

我正在尝试制作下一个动画：logo应该由div向下移动显示。 Div有一个透明的背景。

是否可以隐藏透明div后面的部分徽标？

{{1}}

Answer 1

我非常怀疑你是否可以在透明元素后面剪辑或屏蔽任何内容。

所以，也许你需要重新考虑＆＃34;隐藏在＆＃34; 部分并考虑其他选项。

也许是高度的动画：

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
}
.transparent {
  height: 2em;
  line-height: 2em;
  border-bottom: 1px solid grey;
  position: relative;
}
.logo {
  height: 0;
  background: orange;
  position: absolute;
  top: 100%;
  width: 100px;
  transition: height 0.5s ease;
}
.transparent:hover .logo {
  height: 25px; /* assuming height is known */
}

＆＃13;

<div class="transparent">Some content
  <div class="logo"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试提供隐藏属性以隐藏徽标。

＆＃13;

＆＃13;

visibility:hidden

＆＃13;

＆＃13;

＆＃13;

Answer 3

这样的效果可能有助于徽标背景与您所指的透明 div的背景相同。

像这样：http://codepen.io/anon/pen/aOwZLJ

如果背景是图像，则需要进行一些复杂的计算，以使其看起来像一个元素。

Answer 4

你也可以尝试一下。相关主要是隐藏边界的一部分。

＆＃13;

＆＃13;

div {
  border-top: 1px solid black;
  border-right: 1px solid black;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
div::after {
  content: "";
  height: 50px;
  width: 100%;
  border: 1px solid green;  
  display: block;
  position: absolute;
  border-right: 0px;
  border-top:0px;
  border-bottom: 0px;
  top: -10px;
}

div::before {
  content: "";
  height: 50px;
  width: 100%;
  border: 1px solid green;  
  display: block;
  position: absolute;
  border-right: 0px;
  border-top:0px;
  border-left: 0px;
  top: -1px;
  left: 10px;
  
}

＆＃13;

<div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

在 2021 年，这实际上是可能的，但需要一些技巧。

首先，overflow-y:hidden 从底部隐藏了一些东西......除非它颠倒了。

包装纸应该有任何高度，只要它可以作为截断。

.wrapper {
    height: 70px;
    position: relative;
    overflow-y: hidden;
    transform: rotate(180deg);
}
.logo {
    animation-name: stretch;
    animation-duration: 2s;
    animation-timing-function: linear;
    transform-origin: top;
}
@keyframes stretch {
    0% {
        transform: translateY(110px) rotate(180deg);
    }

    100% {
        transform: translateY(40px) rotate(180deg);
    }
}

所以现在徽标将从看似透明的背景中滑下来。