#html #css #image #transparency #clipping
#HTML #css #изображение #прозрачность #обрезка
Вопрос:
Мне это нужно там, где мои отражения не перекрываются. В настоящее время я использую рисунки и поле reflect:
.scene .carousel figure {
display: block;
position: absolute;
width: 400px;
height: 300px;
left: 0;
top: 10px;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
.scene .carousel figure {
background: black;
}
.carousel-image {
content: "";
background-clip: border-box;
-webkit-box-reflect: below 10px linear-gradient(transparent 60%, white 200%);
} <figure key={i} style={Util.figureStyle(d)} >
<img src={d.info.jpg} alt={d.info ? d.info.name : ""} height={"100%"} widht={"100%"} className='carousel-image' />
</figure> Итак, мой вопрос в основном заключается в использовании этого метода, как мне обрезать отражения за тем, которое ближе всего к верхнему слою?
На данный момент я придумал возможное решение для лейкопластыря, которое заключается в добавлении еще одного элемента div, который просто скрывается за прозрачными изображениями.
.clip-background {
position: absolute;
height: 100%;
width: 450px;
bottom: -100%;
z-index: -1;
background-color: white;
} <figure key={i} style={Util.figureStyle(d)} >
<img src={d.info.jpg} alt={d.info ? d.info.name : ""} height={"100%"} widht={"100%"} className='carousel-image' />
<div className='clip-background' />
</figure> 
Я собираюсь оставить это открытым на случай, если есть лучшее решение. Что-то еще, что мне было интересно, так это могу ли я сделать так, чтобы ближайшее дочернее отражение было более ярким, не устанавливая отдельного отражения для каждого дочернего элемента в карусели, это сделало бы отражение более реалистичным.
Комментарии:
1. Было бы полезно немного больше CSS и HTML!
2. хорошо, дайте мне минуту