html - 使用css将图像任意放置在另一个图像上

Question

有几个类似的问题已发布，但我发现没有一个解决我的情况。

我想列出待售商品，每个商品都在自己的 div 中。当一件商品出售时，我想在任何此类商品上放置一个透明的“已售出”横幅，而不会完全遮挡图像。我需要委托(delegate)其他人在代码中添加“已售出”横幅，而无需我这样做。所以方法越简单越好。

该站点上的大多数(如果不是全部)解决方案都建议在绝对定位的 div 中创建重叠的横幅图像。该辅助 div 包含一个 img src。这看起来更多的代码会使帮助程序感到困惑。

我想如果透明的 SOLD 横幅是背景，这将是语义化的并且容易得多。如果我没记错的话，那么所需要的只是一个简单的类来添加到任何现有的 div 中。例如:

    <div><img src="folder/item3.png"></div> 

...成为

    <div><img src="folder/item3.png" class="sold"></div>

...因此取消了第二个 div 来包含已售出的图形。我尝试了这个，它似乎有效，但横幅仍然顽固地留在元素后面，再多的 Z 索引和绝对定位也无法将它移到它所属的前面。 (实际上我不能绝对定位这个，因为它会干扰整体布局。)

我希望有人可以提出解决问题的方法。

Answer 1

你不能使用包含图像的 div 的背景，因为背景总是在它下面。除非您想将产品图像本身设置为背景，然后将出售的图形作为图像放入其中。

我会做的是，首先你需要你的 div 包含你的图像是 position:relative。然后在其中放置另一个 div 用于绝对定位的已售出图标。 z-index 其上方的已售出图标。

例如:http://jsfiddle.net/z2V2B/1/

html

<div class="imgholder"><div class="soldicon"></div><img src="http://s3-us-west-2.amazonaws.com/hypebeast-wordpress/image/2009/07/huf-converse-product-red-skidgrip-1.jpg" width="250"></div>

<div class="imgholder sold"><div class="soldicon"></div><img src="http://s3-us-west-2.amazonaws.com/hypebeast-wordpress/image/2009/07/huf-converse-product-red-skidgrip-1.jpg" width="250"></div>

CSS

.imgholder {position:relative; z-index:1;}

.soldicon {position:absolute;
    z-index:2;
    top:0; 
    left:0;
width:177px; 
    height:138px;
    background:url(http://www.flq.co.nz/images/icon-sold.gif) no-repeat top left;
}

.sold .soldicon {display:block!important;}

.soldicon {display:none;}

-- 2014 年 5 月 30 日额外--

如果“已售出”标签与图像重叠——该图像最初链接到另一个页面

...修改代码，使已售出的 div 内部也有一个链接，指向与图像相同的位置。然后添加以下CSS:

.soldicon a {text-indent:-9000px; display:block; width:100%; height:100%;} 

这将创建一个不可见的链接(因为文本将从页面缩进，即已售出图标 div 的整个宽度和高度 - 它会看起来好像整个图像再次可点击且不会被遮挡通过已售图标