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

在不了解有关您的设置的更多详细信息的情况下，您可以做到以下几点：

使用img.new:after（Some Quirksmode info on it.）。但它确实有一些browser support limitations。如果您不介意某些旧浏览器不支持此功能，那么我建议您使用此功能。我以前使用它有很好的结果（如果你真的需要，你也可以回到包含在IE条件注释中的JavaScript，因为IE似乎是在不支持它的功能之后出来的唯一浏览器。） / LI>
如果您没有使用overflow:hidden，则可以将其设置为图片，锚标记或下一个父母的背景。当然，这取决于您的确切设计。

在您的锚标记中使用绝对定位的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; }部分。同样，这在很大程度上取决于您的确切设计，因此您可以提供给我们的信息越多，我们就能提供更好的帮助。

实现前景图像效果

2 个答案: