html - Product images, png, not transparent on some pages, Nova theme, bigcartel

Question

i need help. 1) Products images, png, are not transparent on a products page but they are on a single product page. And they are ok on a stacked products layout but not on a grid. And we need grid layout. You can choose grid or stacked layout in the theme settings. (Nova theme) 2) Also on flexslider. This is also important to us because we want to play with various frames and we need that transparency.. I spent days researching this and found no solution, my head is full and confused. Can you help?

Answer 1

这是您的 HTML：

<section class="product_images">
    <img src="http://images.cdn.bigcartel.com/bigcartel/product_images/141424843/max_h-300+max_w-300/traka2.png" class="fade_in" alt="Image of yellow melon. mellow">
</section>

该<section>标签通过 class 应用了背景颜色product_image。这是该类的CSS：

#products_page .canvas.grid #products .product a .product_images {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: transparent;
    background: #efefef;
}

这个 CSS 选择器出现line 1471在theme.css. 删除第二个背景声明，background: #efefef;您看到的颜色将消失。在 CSS 中，如果稍后以相同的特性重复某个规则，它将被覆盖。这是一个链接，可以了解更多关于 CSS、级联、特异性等的信息。

把你的<img>元素想象成坐在你的元素之上<section>。您的图像的一部分具有透明度，例如窗口，因此位于“下方”的任何东西都会显示出来。您的<section>元素具有浅灰色背景颜色，通过 PNG 的透明度显示。

Answer 2

使用 Big Cartel 的系统执行此操作的最佳方法是前往自定义设计 > 高级 > CSS，并将其粘贴到最底部：

#products_page .canvas.grid #products .product a .product_images { 
    background:none; 
}

这样你就不需要在编辑器中挖掘代码行来修改，如果你改变主意，你可以快速轻松地删除这 3 行。