0

好的，所以我有这个图像滑块，可以在页面左侧滑动图像。他们不断地从下往上滚动。但我希望图像也能使用 CSS 进行反射。所以我写了另一个 div，由反向的相同图像和不透明度组成，所以它看起来像反射，但完整的图像正在反射，这破坏了整个事物的外观。所以我在每个反射下方写了另一个 div，它会在一定程度上掩盖图像反射，并赋予它比图像反射更高的 z-index 但无论如何这似乎不起作用。无论我尝试什么，图像反射都会出现在添加的 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);

}
4

1 回答 1

0

我认为您可以通过简化代码来获得效果。覆盖不是必需的。

为 .reflection 设置如下样式：

.reflection  {height:20px;  overflow:hidden; margin:-10px 0 10px 0;}

在jsfiddle看到这个例子

于 2013-03-22T13:26:45.947 回答