Прозрачные изображения 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; 
} 

Я проверил его и он прекрасно работает.