1

在此页面上，我在图像下方的 div 中有一个具有光泽效果的图像。

http://www.joelin.org/home2.html

我基本上想在图像顶部移动光泽效果。我试过

1）直接将样式添加到img标签，没有效果2）在图像周围创建一个div，将光泽div放入其中（但光泽div最终位于图像下方）

还有其他想法吗？

4

2 回答 2

3

您想要实现的目标是不是类似http://dabblet.com/gist/3610138 ？

HTML：

<a href='#' class='img-wrapper'>
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
</a>

CSS：

.img-wrapper, .img-wrapper img {
    display: inline-block;
    position: relative;
    width: 13em;
    height: 8em;
    border-radius: 1em;
}
.img-wrapper:after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 1em;
    box-shadow: inset 0 1em 0 0 rgba(192, 192, 192, .5);
    pointer-events: none; /* so that you can get image from right-click menu
                                won't work in IE and Opera */
    content: '';
}

如果您不需要 img 标签并且可以将图像作为背景图像，那么它会变得更容易。只有一个元素：

<div class='glossy'></div>

只是这个CSS：

.glossy {
    width: 13em;
    height: 8em;
    border-radius: 1em;
    background: linear-gradient(rgba(192, 192, 192, .5) 12.5%, transparent 12.5%),
        radial-gradient(100% 100%, transparent 71%, rgba(192, 192, 192, .5) 71%) 
            no-repeat 0 1em,
        radial-gradient(0% 100%, transparent 71%, rgba(192, 192, 192, .5) 71%) 
            no-repeat 100% 1em,
        url(http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg);
    background-size: 1px 100%, 1em 1em, 1em 1em, cover;
}
于 2012-09-03T15:41:30.360 回答
1

您可以尝试对 div 使用绝对定位将其置于图像之上。您还需要使用 z-index 来正确分层。尝试这样的事情：

.imageClass
{
    z-index: 1;
}

.glossyDiv
{
    position: absolute;
    top: 999px;
    left: 999px;
    z-index: 5;
    /* you'll need to figure out where your image sits in relation to the
    top and left of the screen, replace the 999s with the correct values */
}

那应该让 div 覆盖图像。您可以更改此设置，以便 div 相对于其容器定位，如果这是您设置 HTML 的方式。

z-index 控制元素如何分层/堆叠，因此将 div 设置为较高的索引使其更接近屏幕的“前面”，而较低的数字将其设置为后面。请注意，z-index 仅适用于“定位”元素源

于 2012-09-03T15:30:08.033 回答