我显示了一些宽度和高度不同的图像,并且我希望能够添加一两个类,例如newhot,它们会添加小的叠加星或其他内容。

通常,可以通过以目标图像为背景的div来解决此问题,但是由于我的图像大小均未知,我陷入了试图找出如何实现此目标的困境。当前HTML的结构为:<a><img></a>

我正在寻找一个不存在的CSS功能:

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


我真的很想解决这个问题,而无需数据库图像大小,也无需使用JavaScript。但是,如果您使用的是优雅的JS / jquery方法,那么我无所不能。

最佳答案

我不确定这对您的效果如何,但是如果您可以将类添加到<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告诉你我的意思。

关于html - 实现前景图像效果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9707391/

10-12 00:31
查看更多