css - 如何在 Magento 的图像产品上重叠 2 张图像？

Question

在 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 在 vi​​ew.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 我能够将它放在正确的位置但是......我不知道如何将调整大小与产品图像“绑定(bind)”以便它们可以缩放“togheter”(图像产品，image-top.png和 image-bottom.png)就像它们只是一张图片一样。

---

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

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

Answer 1

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

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

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

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

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