html - 使用其他 div 或任何其他方法裁剪图像反射-6ren

html - 使用其他 div 或任何其他方法裁剪图像反射

转载作者：行者123 更新时间：2023-11-28 13:28:56

24

4

好的，所以我有这个图像 slider ，它可以在页面左侧滑动图像。他们不断地从下往上滚动。但我希望图像也能使用 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);

}

最佳答案

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

像这样设置 .reflection 的样式:

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

请参阅 jsfiddle 中的示例

关于html - 使用其他 div 或任何其他方法裁剪图像反射，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13793803/

24

4

0

文章推荐： html - CSS 图片库

文章推荐： html - 如何在绝对定位的 div 中居中 div？

文章推荐： ios - Uitableviewcell 在尝试显示谷歌广告时不显示任何内容

文章推荐： html - css重叠问题

Ruby 方法() 方法
我想了解 Ruby 方法 methods() 是如何工作的。我尝试使用“ruby 方法”在 Google 上搜索，但这不是我需要的。我也看过 ruby-doc.org，但我没有找到这种方法。
VBS教程：方法-Test 方法
Test 方法对指定的字符串执行一个正则表达式搜索，并返回一个 Boolean 值指示是否找到匹配的模式。 object.Test(string) 参数 object 必选项。总是一个
VBS教程：方法-Replace 方法
Replace 方法替换在正则表达式查找中找到的文本。 object.Replace(string1, string2) 参数 object 必选项。总是一个 RegExp 对象的名称。
VBS教程：方法-Raise 方法
Raise 方法生成运行时错误 object.Raise(number, source, description, helpfile, helpcontext) 参数 object 应为
VBS教程：方法-Execute 方法
Execute 方法对指定的字符串执行正则表达式搜索。 object.Execute(string) 参数 object 必选项。总是一个 RegExp 对象的名称。 string
VBS教程：方法-Clear 方法
Clear 方法清除 Err 对象的所有属性设置。 object.Clear object 应为 Err 对象的名称。说明在错误处理后，使用 Clear 显式地清除 Err 对象。此
VBS教程：方法-CopyFile 方法
CopyFile 方法将一个或多个文件从某位置复制到另一位置。 object.CopyFile source, destination[, overwrite] 参数 object 必选
VBS教程：方法-Copy 方法
Copy 方法将指定的文件或文件夹从某位置复制到另一位置。 object.Copy destination[, overwrite] 参数 object 必选项。应为 File 或 F
VBS教程：方法-Close 方法
Close 方法关闭打开的 TextStream 文件。 object.Close object 应为 TextStream 对象的名称。说明下面例子举例说明如何使用 Close 方
VBS教程：方法-BuildPath 方法
BuildPath 方法向现有路径后添加名称。 object.BuildPath(path, name) 参数 object 必选项。应为 FileSystemObject 对象的名称
VBS教程：方法-GetFolder 方法
GetFolder 方法返回与指定的路径中某文件夹相应的 Folder 对象。 object.GetFolder(folderspec) 参数 object 必选项。应为 FileSy
VBS教程：方法-GetFileName 方法
GetFileName 方法返回指定路径（不是指定驱动器路径部分）的最后一个文件或文件夹。 object.GetFileName(pathspec) 参数 object 必选项。应为
VBS教程：方法-GetFile 方法
GetFile 方法返回与指定路径中某文件相应的 File 对象。 object.GetFile(filespec) 参数 object 必选项。应为 FileSystemObject
VBS教程：方法-GetExtensionName 方法
GetExtensionName 方法返回字符串，该字符串包含路径最后一个组成部分的扩展名。 object.GetExtensionName(path) 参数 object 必选项。应
VBS教程：方法-GetDriveName 方法
GetDriveName 方法返回包含指定路径中驱动器名的字符串。 object.GetDriveName(path) 参数 object 必选项。应为 FileSystemObjec
VBS教程：方法-GetDrive 方法
GetDrive 方法返回与指定的路径中驱动器相对应的 Drive 对象。 object.GetDrive drivespec 参数 object 必选项。应为 FileSystemO
VBS教程：方法-GetBaseName 方法
GetBaseName 方法返回字符串，其中包含文件的基本名 (不带扩展名), 或者提供的路径说明中的文件夹。 object.GetBaseName(path) 参数 object 必
VBS教程：方法-GetAbsolutePathName 方法
GetAbsolutePathName 方法从提供的指定路径中返回完整且含义明确的路径。 object.GetAbsolutePathName(pathspec) 参数 object
VBS教程：方法-FolderExists 方法
FolderExists 方法如果指定的文件夹存在，则返回 True；否则返回 False。 object.FolderExists(folderspec) 参数 object 必选项
VBS教程：方法-FileExists 方法
FileExists 方法如果指定的文件存在返回 True；否则返回 False。 object.FileExists(filespec) 参数 object 必选项。应为 FileS

首页

博学

6Ren·AI

商城

html - 使用其他 div 或任何其他方法裁剪图像反射