Question

我有这个阴影，并且我得到的图片必须与shaodw中的正方形相同。我用CSS尝试了不同的方法。但是总是在调整窗口大小时，与阴影相比，图片不再位于同一位置。

我已经使用CSS尝试过类似的方法：

.product__image{

        max-width: 100%;
    position: relative;
}

.product__background{
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -35%;
    right: -100%;
    top: -20%;
    bottom: -10%;
    z-index: -1;

}

<div class="product__image">
                <div class="product__background" style="background-image:
                    url('https://cdn.shopify.com/s/files/1/0050/5141/6625/files/pink.jpg?5067');" style="z-index: -100">
                </div>
                <img src="{{ product.featured_image | img_url: '630x420'}}" class=""
                                    alt="Product image">

            </div>

但这不适用于调整窗口大小。

有人可以帮助我获得此功能吗？我无法手动插入阴影，因为这样阴影还会出现在网站上的其他位置。

也许有一个CSS选项可以生成此阴影。那也很棒！

如何相对于上方图像放置另一个图像

0 个答案: