实现前景图像效果

Question

我显示了一些不同宽度和高度的图像，我希望能够添加一个或两个类，例如new或hot，这会添加小叠加星或其他东西。

通常情况下，这可以通过将预期图像作为背景制作div来解决，但让我的图像全部具有未知尺寸，我会陷入困境，试图找出如何实现这一点。当前的HTML是结构：<a><img></a>

我正在寻找一个CSS功能，不存在：

img.new { foreground:transparent url('/images/new.png') no-repeat bottom right } 

我真的希望能解决这个没有数据库福我的图像尺寸，以及不使用JavaScript 。但是，如果你有一个优雅的JS/jQuery方法，我就会全神贯注。

Answer 1

我不知道如何这会为你工作，但如果你可以将该类添加到您的<a>元素，而不是你的<img>：

<a class="new" href="..."><img src="..." alt="alt text"></a> 

这时可以尝试添加a:after伪元素绝对定位在您<img>，并给予它的覆盖图标为背景图像：

a.new { 
    display: inline-block; 
    position: relative; 
} 

a.new:after { 
    display: block; 
    position: absolute; 
    content: ''; 
    width: /* width of overlay image or anything you choose */; 
    height: /* height of overlay image or anything you choose */; 
    right: 0; 
    bottom: 0; 
    background: transparent url('/images/new.png') no-repeat; 
} 

有一个有点问题与叠加图像的定位为<a>是一个内联块，用于定位工作，但你总是可以给它一些bottom偏移量来弥补它。 Here's a fiddle向你展示我的意思。

Answer 2

不知道有关设置的详情，也有浮现在脑海中，你可以做几件事情：

1. 使用img.new:after（Some Quirksmode info on it.）。但它确实有一些browser support limitations。如果你不介意一些旧浏览器不支持这一点，那么我推荐这个。我之前使用它的结果很好（如果真的需要的话，你也可以回到IE浏览器条件注释中包装的JavaScript，因为IE似乎是不支持它的功能之后的唯一浏览器）。
2. 如果您未使用overflow:hidden，则可以将其设置为图像，其定位标记或下一个父标记的背景。这当然取决于你的确切设计。

3. 在您的定位标记中使用绝对定位的div或span，并仅在类别为.new的定位点上显示。所以，这样的事情：

   <a class="new"> 
   <span class="newBanner"> 
   <img/> 
   </a> 
   
   <style> 
   
   .newBanner { 
       display: none; 
       position: absolute; 
       top: 0; 
       right: 0; 
   } 
   
   .new .newBanner { 
       display: block; 
   } 
   
   </style> 
   

这最后一个的那种粗糙，很可能需要调整，但关键是在造型，特别是.new .newBanner { display: block; }部分。同样，这在很大程度上取决于您的确切设计，所以您可以给我们提供的信息越多，我们就能给您提供的更好的帮助。