产品图片，png，某些页面不透明，Nova主题，bigcartel

Question

我需要帮助。1)产品图像，png，在产品页面上不是透明的，但它们在单个产品页面上。它们适用于堆叠的产品布局，但不适用于网格。我们需要网格布局。您可以在主题设置中选择网格或堆叠布局。(Nova主题)2)也在柔性滑块上。这对我们来说也很重要，因为我们想要玩各种框架，我们需要透明度。我花了几天的时间研究这个问题，但没有找到解决方案，我的头脑充满了困惑。你能帮忙吗?

Answer 1

对于Big Cartel的系统，最好的方法是进入自定义设计>高级> CSS，并将此粘贴在最底部:

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

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

Answer 2

这是你的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>标签有一个背景色通过类product_image应用到它。下面是该类的CSS:

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

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

想象你的<img>元素位于<section>元素之上。你的图像的一部分是透明的，就像一个窗口，所以任何位于"下面"的东西都会被显示出来。你的<section>元素的背景颜色是浅灰色，可以通过PNG的透明度显示出来。