css background-image w/background-color показывает границу артефакта в хроме

Я пытаюсь использовать прозрачный .png в качестве фонового изображения, чтобы я мог динамически использовать любой цвет, который мне нужен, чтобы изменить цвет «значка».

У меня есть .png размером 40 x 40 пикселей. Я применяю его к div с помощью background-image, затем задаю этому же div цвет фона:

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

Обычно это работает нормально, поэтому я не уверен, что с этим происходит. Вот скриншот того, что я вижу на Mac и ПК (соответственно) в последней версии Chrome:

Macвведите здесь описание изображения

ПКвведите здесь описание изображения

РЕДАКТИРОВАТЬ: Вот урезанная версия сайта, которая показывает проблему, с которой я столкнулся :

Я попытался сделать скрипку (вот она в любом случае), но скрипка отлично отображается в хроме, но не на мой настоящий сайт. Я не использую проценты для этого или чего-то еще, и я использую собственный размер для фона - у кого-нибудь еще есть эта проблема?


google-chrome html css visual-artifacts
person ntgCleaner    schedule 12.12.2014    source источник
comment
Если скрипка работает... как вы думаете, мы сможем решить проблему? Может быть, поделитесь также ссылкой на ваш сайт   -  person DaniP    schedule 12.12.2014
comment
@danko Я отредактировал вопрос, чтобы показать урезанную версию страницы.   -  person ntgCleaner    schedule 12.12.2014

Ответы (2)


arrow_upward
4
arrow_downward

Добавить -webkit-backface-visibility: hidden; в div с вашим фоновым изображением (.info .img в вашем случае).

Вы используете преобразование для родительского элемента, а Chrome делает странные вещи с задними и преобразованными элементами.

Я приведу несколько релевантный ответ, хотя это был ответ на несколько другую проблему: преобразование css, неровные края в chrome

person JackArbiter    schedule 12.12.2014
comment
Очень красиво, я такого еще не видела! - person ntgCleaner; 12.12.2014

arrow_upward
1
arrow_downward

Преобразование, которое у вас есть на .info, - это то, что с ним связано. Вместо использования процентов попробуйте:

    .info{
        transform: translate(0px,-3px);
person Justin Breiland    schedule 12.12.2014
comment
Вы очень правильно говорите, что проценты в преобразовании - это то, что все испортило. К сожалению, мне приходится использовать проценты для этого конкретного приложения. - person ntgCleaner; 12.12.2014