0

我正在为客户设计一个在线商店，产品图像需要显示在一个框架中，但是这个框架应该显示在图像之上而不是它后面（框架的图像是一个有点花哨的东西，不一样形状作为产品图像，因此它需要位于顶部 - 这是产品页面屏幕截图的链接，列表中包含背景图像 -产品页面

（那些粉红色的小图像需要坐在图像的顶部）这是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）实际上可以位于列表中显示的图像之上吗？

非常感谢任何帮助！

4

2 回答 2

1

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

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

有几种方法可以获得您想要的效果：

  1. 更改标记和 CSS：添加一个以框架作为背景图像的额外元素（并更改 CSS 以删除框架作为列表项的背景图像）。这个元素需要是列表项的另一个子元素，并且为了出现在产品图像的顶部，它需要出现在图像元素之后，或者需要有一个位置和一个 z-index。

  2. 仅更改 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 来解决它。如果您的产品图片是链接，并且框架覆盖了其中的一部分，那么用户可能最终会在他们认为点击了图片时点击了框架，并想知道为什么他们没有得到产品页面/弹出窗口/其他任何内容。

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

*可能 .product-grid li a:after取决于您如何解决链接点击问题。

于 2012-10-04T18:21:42.567 回答
0

背景图像在背景中，期间。您必须将包含背景的元素绝对定位在包含图像的不同元素上。您可以使用绝对定位来执行此操作。

于 2012-10-04T18:07:06.987 回答