我显示了一些宽度和高度不同的图像,并且我希望能够添加一两个类,例如new
或hot
,它们会添加小的叠加星或其他内容。
通常,可以通过以目标图像为背景的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/