PrestaShop 1.6.x. 如何使用透明图像

Vincent White 2015年2月23日

image Prestashop transparent

Rating: 5.0/5. From 1 vote.

Please wait...

下面的教程展示了如何使用透明图像 background in PrestaShop 1.6.x templates.

PrestaShop 1.6.x. 如何使用透明图像

登录到管理面板，导航到 Preferences -> Images.
In the 图像质量部分, select 仅当基础图片为PNG格式时使用PNG.
打开产品需要上传的透明图片 background. 我们将上传透明的图像 background. Be sure to use .PNG格式的图像应该是透明的 background. We have opened Firebug. Mozilla Firefox插件以显示图像的来源. 图像是透明的 background. 然而，css background 颜色仍然显示出来.
为了摆脱 background，我们需要找到白色的源文件. 如果看不到源css文件，则需要关闭 cache and CCC 选项，以找出应该在哪些文件中执行自定义. Go to Advanced Parameters -> Performance, turn off cache and select 保持CSS的原貌 option. Refresh the page.
现在我们可以看到应该进行更改的文件. 我们找到了白色的位置 background. 在我们的例子中，我们需要编辑 \ \ themeXXXX \ css \主题产品.css file on our FTP, line 43. 你可以通过 File Manager in you CPanel or some FTP-client software like Total Commander or Filezilla. 您需要修改 background rule:
```
  
	.Pb-left-column #image-block {
		背景:线性梯度(向下), #ffffff 15%, #dadada 100%)重复滚动00 rgba(0, 0, 0, 0);
		边框:1px实线#565555;
		padding: 5px;
		位置:相对;
		z-index: 1;
	}
	
```
修改如下:
```
  
	.Pb-left-column #image-block {
		背景:透明;
		边框:1px实线#565555;
		padding: 5px;
		位置:相对;
		z-index: 1;
	}
	
```
Save changes.
我们刷新了页面. 没有更多的图像 background.

现在我们需要移除边界. 在这种情况下，你的代码应该如下所示:

   
	.Pb-left-column #image-block {
		背景:透明;
		border: none;
		padding: 5px;
		位置:相对;
		z-index: 1;
	}

Refresh the page. 我们去掉了 gradient background 在产品图像中. 我们还删除了图像周围的边框.
同样的方法可以使它透明 logo. 上传新文件 .png logo in Preferences->Themes->Header logo 节和检查它在 frontend with Firebug:

在我们的例子中，我们需要编辑 /主题/ themeXXXX / css /全球.css 文件在5406行. 看看下面的代码:
```
  
    header .block-top {
		背景:url(“../img/bg-menu-row.Gif ") repeat-x scroll 0 0 #020202;
		Border-radius: 5px 5px 0 0;
		Margin: 30px 15px 0;
    }
	
```
这就设置了黑色 background 整个上半部分. 让我们像下面这样编辑:
```
  
    header .block-top {
		背景:透明;
		Border-radius: 5px 5px 0 0;
		Margin: 30px 15px 0;
    }
	
```
Now our logo 以及搜索，用户信息和购物车块得到了透明 background.
本教程到此结束. 现在您知道如何管理透明图像了 background in PrestaShop 1.6.x templates.