Я делаю следующую анимацию: логотип должен быть раскрыт div, движущимся вниз. Div имеет прозрачный фон.Скрыть элемент за прозрачным div
Можно скрыть накладную часть логотипа за прозрачным div?
<div class="transparent">Some content</div>
<div class="logo"></div>
.transparent { position: relative }
.logo { position: absolute }
вы можете попытаться дать Visibility скрытые свойства, чтобы скрыть логотип.
visibility:hiddenХотя это может теоретически ответить на вопрос, было бы предпочтительнее, если бы вы могли * демонтировать * ** точно **, как это разрешает вопрос пользователей. –
Необходимо скрыть только наложенную часть логотипа – MicRum
Я очень сомневаюсь, если вы можете обрезать или замаскировать что-нибудь позади прозрачного элемента.
Итак, возможно, вам нужно переосмыслить «спрятаться за» и рассмотреть другие варианты.
Возможно анимировать высоту:
* {
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 */
}<div class="transparent">Some content
<div class="logo"></div>
</div>Может быть, эффект, как это может помочь, что фон логотипа является такой же, как фон из div вы имеете в виду как прозрачной.
Как это: http://codepen.io/anon/pen/aOwZLJ
Вам нужно будет делать какие-то сложные расчеты, если фон изображения, для того, чтобы он выглядел как один из элементов.
Вы можете попробовать это тоже. Связано главным образом, чтобы скрыть часть границы.
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;
}<div>
</div>Не могли бы вы прояснить свои ответы в контексте вопросника? Где прозрачный div и логотип в вашем ответе? –
Внести jsfiddle – Mustaghees
Это не ясно, что вы пытаетесь сделать ... Очевидно, что-то не может быть скрыт за * прозрачными * делами. –
@Paulie_D Цель моего вопроса в том, есть ли трюк, который позволяет скрыть элемент под прозрачным элементом? – MicRum