使用其他div或任何其他方法裁剪图像反射
好的，我有一个图像滑块，用来滑动页面左侧的图像。它们会从下往上滚动。但我希望图像有一个反射以及使用CSS。所以我写了另一个div，由相反方向的相同图像和较少的不透明度组成，所以它看起来像反射，但完整的图像是反射，这破坏了整个事物的外观。所以我在每个反射下面写了另一个div，它会在一定程度上掩盖图像反射，并给出比图像反射更高的z指数，但无论如何，这似乎不起作用。无论我怎么尝试，图像反射都会出现在添加的div之上。那么，有没有一种方法可以在不影响图像比例的情况下裁剪反射图像，或者在我的情况下，添加的div“覆盖”位于反射图像之上？还有我的例子"imagesRow“中包含所有图像的主div，我想给它一些样式，让它看起来像一个玻璃。但是，无论我为该div赋予什么样式，它都会自动应用到子组件。那么有没有一种方法可以改变主div(ImagesRow)的样式而不影响里面的图片呢？这个链接可能会对我有所帮助。http://jsfiddle.net/659Na/
Html代码：
<div id="imagesRow" style="position: absolute;top:5px;">
<marquee behavior="scroll" direction="up" onmouseover="this.stop();" onmouseout="this.start();" height="725" >
<div id="l1" class="father">
<img class="messagesOne" src="images/images.png">
<div class="reflection">
<img src="images/images.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l2" class="father">
<img class="messagesOne" src="images/image3.png">
<div class="reflection">
<img src="images/image3.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l3" class="father">
<img class="messagesOne" src="images/image5.png">
<div class="reflection">
<img src="images/image5.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l4" class="father">
<img class="messagesOne" src="images/image7.png">
<div class="reflection">
<img src="images/image7.png" />
<div class="overlay"></div>
</div>
</div>
</br>
</br>
<div id="l5" class="father">
<img class="messagesOne" src="images/image9.png">
<div class="reflection">
<img src="images/image9.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l6" class="father">
<img class="messagesOne" src="images/image11.png">
<div class="reflection">
<img src="images/image11.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l7" class="father">
<img class="messagesOne" src="images/image12.png">
<div class="reflection">
<img src="images/image12.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l8" class="father">
<img class="messagesOne" src="images/image14.png">
<div class="reflection">
<img src="images/image14.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l9" class="father">
<img class="messagesOne" src="images/image15.png">
<div class="reflection">
<img src="images/image15.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l10" class="father">
<img class="messagesOne" src="images/image16.png">
<div class="reflection">
<img src="images/image16.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l11" class="father">
<img class="messagesOne" src="images/image17.png">
<div class="reflection">
<img src="images/image17.png" />
<div class="overlay"></div>
</div>
</div>
</marquee>
</div>css文件：
.messagesOne{
height: 60px;
width: auto;
margin-left: 56px;
}
.reflection img {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; opacity:0.20;
filter: alpha(opacity='20');
height: 60px;
width: auto;
margin-left: 56px;
z-index: -1100;
}
.overlay {
margin-top: -44px;z-index: 1000; width:auto; height:60px;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}回答 1
Stack Overflow用户
发布于 2013-03-22 21:26:46
我认为你可以通过简化你的代码来达到这个效果。覆盖不是必需的。
设置.reflection的样式如下所示：
.reflection {height:20px; overflow:hidden; margin:-10px 0 10px 0;}请访问jsfiddle查看此示例
https://stackoverflow.com/questions/13793803
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号