如何在 Magento 的图像产品上重叠 2 个图像？答案

【问题标题】：How can I overlap 2 images on image product in Magento?如何在 Magento 的图像产品上重叠 2 个图像？
【发布时间】：2014-09-19 03:43:17
【问题描述】：

在 Magento 1.9.0.1 中，如何在图像产品（产品页面）上重叠 2 个图像并以与更改分辨率时图像产品调整大小相同的方式调整它们的大小？

我尝试使用 css 伪元素（:before 和 :after），但我无法调整大小，老实说，我注意到奇怪的行为（最初不显示图像，仅在调整 Chrome/Firefox 窗口大小时出现...)。

.product-image.product-image-zoom.zoom-available:before {
    content: url("/media/css/image_top.png");
    z-index: 10;
    position: absolute;
    top: -6px;
    left: -5px;
}

.product-image.product-image-zoom.zoom-available:after {
    content: url("/media/css/image_bottom.png");
    z-index: 10;
    position: absolute;
    bottom: -4px;
}

所以或者，我尝试通过html在view.phtml中插入图片

......
<div class="product-img-box">
    <div class="product-name">
        <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
    </div>
        <img src="media/css/image-top.png">
        <img src="media/css/image_bottom.png">        
        <?php echo $this->getChildHtml('media') ?>
</div>
.......

并且使用类似的 css，我可以将其放置在正确的位置，但是...我不知道如何将调整大小与产品图像“绑定”，以便他们可以“缩放”（图像产品，image-top.png和 image-bottom.png) 就像它们只有一张图片一样。

图片1：http://s30.postimg.org/7fnfl2yrl/screen.png

图片2：http://s30.postimg.org/78z4gzh0x/screen3.png

【问题讨论】：

另外，请编辑此问题以包含您一直在尝试的一些 CSS，以便我们更好地理解。
感谢您的回复。我编辑了帖子。我会做得更好，以提高声誉。

标签： css magento magento-1.9.1

【解决方案1】：

我只是个笨蛋，我现在意识到在 view.phtml 中

<?php echo $this->getChildHtml('media') ?>

调用文件 /template/catalog/product/view/media.phtml 所以我把我的<img> 放在里面

<div class="product-image-gallery">

容器，现在它们可以正确调整大小。对于 div 容器宽度较小的 image-top.png 的“微调”调整大小，我添加了一些 padding-right。

【讨论】：