배경색이 배경색으로 표시됩니다.

Question

투명한 .png을 배경 이미지로 사용하여 내가 필요한 색상을 동적으로 사용할 수 있도록 "아이콘"색상을 변경하려고합니다. ".

나는 .png가 40px x 40px입니다.

.icon { 
    width:40px; 
    height:40px; 
    background-image:url('../images/ico.png'); 
    background-color:#999999; 
} 

이 정상적으로 잘 작동, 그래서이와 무슨 일이 일어나고 있는지 확실하지 않다 : 나는 배경 이미지를 사용하여 사업부에 적용, 그때 같은 DIV 배경 색이 있음을 제공합니다. 여기에 내가 맥과 크롬의 최신 버전에서 PC (각각)에 표시되는 내용의 스크린 샷입니다 :

맥

PC

편집 : 문제를 보여줍니다 사이트의 Here's a stripped down version I 내가 가지고있는 것 :

나는 피들 (here it is anyway)을 만들려고 노력했다. 그러나 피들은 크롬에서 완벽하게 보인다, 단지 나의 실제 사이트에 없다. 이것에 대한 백분율을 사용하지 않고 배경에 기본 크기를 사용하고 있습니다. 다른 누구에게도이 문제가 있습니까?

Answer 1

추가 -webkit-backface-visibility : hidden; 귀하의 이미지 배경 (귀하의 경우 .info. img)로 div에.

상위 요소에 대해 변환을 사용하고 있으며 Chrome은 뒷면 및 변형 된 요소로 이상한 일을합니다. css transform, jagged edges in chrome

Answer 2

가 그것으로 장난 무엇 .INFO입니다에 당신이 변환 : 그것은 약간 다른 문제에 대한 대답 이었지만

나는, 다소 관련 대답을 연결합니다. 백분율을 사용하는 대신 다음을 시도하십시오.

.info{ 
     transform: translate(0px,-3px);