Octopress透明图像有背景

Question

我正在使用Octopress创建一个网站。当我向网页添加透明PNG时，它出现了白色背景。我在以前的网站上使用了相同的PNG，它显示透明。

我可以使用基本的html图像标记或Octopress的图像标记添加图像。

{% img [class names] /path/to/image [width] [height] [title text [alt text]] 

一个例子是http://aradreed.me/404。我已经在预览中关闭了边框，但还没有关闭现场网站。我尝试使用css通过执行background: transparent;及其他版本来解决问题，但背景仍然存在。有什么办法可以让我的网站上保留图像的透明度吗？

Answer 1

使用开发人员工具在您的网站上查看该图片，该图片从screen.css样式表中获取以下样式：

article img {
     -webkit-border-radius: 0.3em;
     -moz-border-radius: 0.3em;
     -ms-border-radius: 0.3em;
     -o-border-radius: 0.3em;
     border-radius: 0.3em;
     -webkit-box-shadow: rgba(0,0,0,0.15) 0 1px 4px;
     -moz-box-shadow: rgba(0,0,0,0.15) 0 1px 4px;
     box-shadow: rgba(0,0,0,0.15) 0 1px 4px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     border: #fff 0.5em solid;
}

由于这些样式，图像会获得白色边框和阴影。您可以通过将以下CSS放在screen.css样式表的底部来覆盖这些样式：

article img {
     box-shadow: none !important;
     border: none !important;
}

我已经对它进行了测试，并且它运行良好。