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;
}

我已经测试过了，它运行良好。