如何解决是否可以裁剪其他透明图像后面的透明图像
在我的选任不重叠的地方,我需要它。我目前正在使用数字和方框反映:
.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>
如果有更好的解决方案,我将保持开放。我想知道的是,如果不为轮播中的每个孩子设置单独的反射,是否可以让最近的孩子反射更生动,这将使反射看起来更逼真。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。