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

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