Octopress 투명한 이미지에는 배경이 있습니다.

Question

Octopress를 사용하여 웹 사이트를 만들고 있습니다. 웹 페이지에 투명한 PNG를 추가하면 흰색 배경이 나타납니다. 이전 사이트에서 동일한 PNG를 사용했으며 투명하게 보였습니다.

기본 html 이미지 태그 또는 Octopress의 이미지 태그를 사용하여 이미지를 추가 할 수 있습니다. 예 : http://aradreed.me/404. 미리보기에서는 테두리를 해제했지만 아직 라이브 사이트는 해제하지 않았습니다. 나는 background: transparent; 및 그 다른 버전을 수행하여 문제를 해결하기 위해 CSS를 사용해 보았지만 배경은 여전히 ​​존재합니다. 웹 사이트에 보존 된 이미지의 투명성을 유지할 수있는 방법이 있습니까?

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

을 때문에 이러한 스타일의 이미지가 흰색 테두리와 그림자를 가져옵니다. 당신은 당신의 screen.css 스타일 시트의 맨 아래에 다음과 같은 CSS를 배치하여 이러한 스타일을 덮어 쓸 수 있습니다 :

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

나는 그것을 테스트했습니다 그것은 완벽하게 작동합니다.