Question

我正在为客户设计一个在线商店，产品图片需要在一个框架中显示，但是这个框架应该显示在图像上而不是在它后面（框架的图像是一个小的波浪形的东西，是与产品图像形状不同，因此它需要在顶部 - 这是一个链接到产品页面的屏幕截图与列表中的背景图像 - product page

（那些小粉红色的图像需要坐在图像的顶部）继承人的CSS

.product-grid{
 list-style: none;
 margin: 0;
 color: {{ settings.grid_text_colour }};
 }

   .product-grid li{
 padding: 25px 5px 5px 5px;
 width: 190px;
 float: left;
 margin: 0 15px 10px 0;
 position: relative;
 text-align: center;
background: url({{ 'squiggle.png' | asset_url }}) no-repeat;
}

无论如何，透明的背景图像（squiggle.png）实际上可以位于列表中显示的图像的顶部吗？

任何帮助非常感谢！

Answer 1

我假设产品图片是列表项中包含的<img>标签。

由于您的“框架”是父元素上的背景图像，因此它必须显示在该元素内的任何子元素下方。

有几种方法可以达到你想要的效果：

更改标记和CSS：添加一个额外的元素，其中框架作为其背景图像（并更改CSS以删除框架作为列表项的背景图像）。此元素将需要是列表项的另一个子元素，并且为了显示在产品图像的顶部，它将需要在图像元素之后，或者它需要具有位置和z-index。 / p>
仅更改CSS：在.product-grid li:after * 上设置背景图片，以及这些其他属性，以使:after可见。

content: ''; display: inline-block;

无论您是使用额外的元素还是使用:after伪元素来保持框架，您都需要一些额外的属性来正确调整大小和位置：

position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;

您需要为top，left等位置属性使用负值，以使帧图像大于产品图像。 -20px只是估计值;玩它并找出正确的确切值。

通过执行其中任何一项，您可能会引入可用性问题，因此不要忘记通过进一步的标记更改或使用JS来解决它。如果您的产品图像是链接，并且框架覆盖了它们的一部分，那么用户可能会在他们认为他们点击图像时最终点击框架，并想知道为什么他们没有获得产品页面/弹出窗口/任何内容。

如果您按照上面的第一个建议进行操作，则可以通过将产品图片和框架容器元素包装在link元素中来解决链接问题。如果您使用了第二个建议，您可以使用JS在整个列表项上放置一个重定向到您的产品链接的点击处理程序，或者使用链接元素的:after而不是列表项来保存您的帧图像。 :before和:after伪元素表现为子元素，而不是它们所属元素的兄弟元素，因此单击锚点:after元素将注册为锚点击。

* 可能是.product-grid li a:after，具体取决于您解决链接点击问题的方式。

Answer 2

背景图片属于背景，时期。您必须将包含背景的元素绝对定位在包含图像的其他元素上。您可以使用绝对定位来执行此操作。

列出索引背景图片 - 到前面？

2 个答案: