如何将样式应用于图像

在此页面上，我在图像下方的div中有一个带有光泽效果的图像。如何将样式应用于图像

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

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

1）直接添加样式img标签，没有影响 2）创建图像周围一个div，把光滑的div它（但光滑的DIV结束了在图片下方）

任何其他想法？

2012-09-03 Joe

使用绝对定位用z-index相对定位的包装内层。但是，你想在另一个之上的图像不会伸展。从此搜索开始，https://www.google.se/search?q=absolute+relative+positioning+css&sugexp=chrome,mod=7&sourceid=chrome&ie=UTF-8 –

只需使用“div”上的样式即可'img'应该可以工作。如果它不起作用，你可以尝试添加'display：block'，但我认为默认情况下图像标签是块。所有指定的样式都与图像兼容，所以应该没有问题。 – Blieque

使图像成为div的背景。 – Phrogz

是否像这样的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-03 15:41:30 Ana

它做到了！哇，我无法弄清楚所有这些......谢谢！ – Joe

您可以尝试使用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索引控制元素如何被分层/堆叠，因此设置在div到较高索引带来它更接近屏幕的“前”和较低的数字其设置为背面。请注意，Z指数将只适用于“定位”的元素source

来源

2012-09-03 15:30:08 ThunderCat

找到每个图像的绝对位置不切实际且不必要的复杂。（需要JS，这通常不需要解决这个问题。） – Phrogz

我在这里学到了一些关于定位..thx（与其他解决方案一起使用） – Joe

如何将样式应用于图像

回答

相关问题