Css 如何将样式应用于图像

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

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

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

---

还有其他想法吗？

您可以尝试使用div的绝对定位将其放置在图像上方。您还需要使用z索引来正确分层。试着这样做：

.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索引控制元素的分层/堆叠方式，因此将div设置为更高的索引将使其更靠近屏幕的“前面”，而数字越低，则将其设置为后面。请注意，z-index仅对“定位”元素起作用

您可以尝试使用div的绝对定位将其放置在图像上方。您还需要使用z索引来正确分层。试着这样做：

.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索引控制元素的分层/堆叠方式，因此将div设置为更高的索引将使其更靠近屏幕的“前面”，而数字越低，则将其设置为后面。请注意，z-index只适用于“定位”元素

您希望实现的是这样的效果吗

HTML:

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

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

这是你想要达到的目标吗

HTML:

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

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

---

在相对定位的包装中使用绝对定位层和z索引。但是你想要的图像在另一个上面不会拉伸。从这个搜索开始，只需使用

img

上

div

上的样式就可以了。如果不起作用，可以尝试添加

display:block

，但我认为默认情况下图像标记是块。所有指定的样式都与图像兼容，因此应该不会出现问题。将图像作为div的背景。我尝试了背景图像的方法，但当我指定div宽度/高度时，结果图像太大并被裁剪…如果您无法在服务器上适当调整图像大小（我会）可以在现代浏览器上使用该属性调整背景图像的大小。但对于较旧的浏览器，您需要使用真正的

标记和@Henrik建议的方法。使用绝对定位层，在相对定位包装中使用z索引。但是你想要的图像在另一个上面不会拉伸。从这个搜索开始，只需使用

img

上

div

上的样式就可以了。如果不起作用，可以尝试添加

display:block

，但我认为默认情况下图像标记是块。所有指定的样式都与图像兼容，因此应该不会出现问题。将图像作为div的背景。我尝试了背景图像的方法，但当我指定div宽度/高度时，结果图像太大并被裁剪…如果您无法在服务器上适当调整图像大小（我会）可以在现代浏览器上使用该属性调整背景图像的大小。但对于较旧的浏览器，您需要使用真正的

标记和@Henrik建议的方法。定位每个图像的绝对位置既不实际，也不必要地复杂。（需要JS，通常不需要JS来解决这个问题。）我在这里学到了一些关于定位的知识。thx（使用另一种解决方案）对于定位每个图像的绝对位置来说是不切实际和不必要的复杂。（需要JS，通常不需要JS来解决这个问题。）我在这里学到了一些关于定位的知识。thx（使用其他解决方案）成功了！哇，我不可能弄明白所有这些。。。非常感谢。成功了！哇，我不可能弄明白所有这些。。。非常感谢。

.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;
}