Question

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

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

本网站上的大多数（如果不是全部）解决方案都建议在绝对定位的div中创建重叠的横幅图像。辅助div包含一个img src。这看起来像混淆帮助器的代码要多得多。

我认为如果透明的SOLD横幅是背景，它将是语义的并且更容易。如果我没有弄错的话，那么所需要的只是一个简单的类添加到任何现有的div。例如：

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

...变成

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

...因此取消了第二个div来包含SOLD图形。我尝试了这个，它似乎工作，但横幅仍然固执地在项目后面，没有任何数量的Z-indexing和绝对定位会把它放在它所属的前面。（实际上我无论如何都不能绝对定位，因为它会干扰整体布局。）

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

Answer 1

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

我要做的是，首先你需要包含你的形象的div作为位置：相对。然后在其中放入另一个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;}

- ADDITIONAL 30/05/14 -

如果SOLD标签与图像重叠 - 最初链接到另一个页面

... dit代码，以便销售的div也有一个链接到它与图像相同的位置。然后添加以下css：

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

这样做会创建一个不可见的链接（因为文本将在页面上缩进，这是已售出的图标div的全宽和高度 - 它将毫无疑问地好像整个图像可以再次点击而不会被遮挡按销售图标

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

1 个答案: