Как убрать границу наложения прозрачного изображения, которое появляется в Chrome только при разных уровнях масштабирования?

0

Не уверен, что это может быть ошибка Chrome (FF и IE работают нормально), так как я пробовал различные обходы, особенно те, что я нашел здесь, но безрезультатно: удаление границы изображения в Chrome/IE9

В основном я накладываю изображение поверх другого, и я заметил, что с Chrome, если я масштабирую страницу до любого уровня масштабирования, отличного от 100%, вокруг наложения появляется серая рамка изображения. Вы можете увидеть это в действии здесь: http://jsfiddle.net/6HLzx/

EDIT: Я обновил JSFiddle, чтобы включить лучший пример того, что я пытаюсь выполнить.

// css
#background { position: fixed; left: 0px; top: 0px; border: none;  border-style: none; z-index: 0; }
#overlay { position: fixed; left: 0px; top: 0px;  border: none; border-style: none;  z-index: 1;}

// html
<body>
    <div id="background">
        <img border="0" src="http://gorch.com/webstuff/background.png">
    </div>
    <div id="overlay">
        <img border="0" src="http://gorch.com/webstuff/overlay.png">
    </div>
</body>

Есть идеи? Заранее спасибо!

-jojohack

Теги:
image
google-chrome
border

1 ответ

1
Лучший ответ

UPDATE: слабая строка, которую вы видите, вызвана браузером, отображающим изображение с краем против алиаса. Это создает одну пиксельную линию, которая составляет половину непрозрачности. Теперь вопрос... Как отключить сглаживание изображений?

Если вы хотите, чтобы background.png был фоном, примените его в css.

В качестве примера.

HTML

<body>
    <div id="background">
        <div id="overlay">

        </div>
    </div>
</body>

CSS

#background { background: #333 url(http://gorch.com/webstuff/background.png); width: 500px; height: 500px; }
#overlay { background: rgba(255,0,0,0.5) /*partially transparent color*/; width: 480px; height: 480px;  }

Не могу больше помочь, чем без дополнительной информации и примеров того, чего вы пытаетесь достичь.

Сэм

Поделиться
  • 0
    Я пытался следовать вашему примеру, но получил те же результаты. Вот лучший пример того, что я пытаюсь сделать: gorch.com/webstuff/tv_example.html Если вы перейдете по этой ссылке, вы увидите слабую белую рамку, окружающую оверлей (если вы отрегулируете уровень масштабирования). Мне нужно, чтобы наложение тоже было изображением.
  • 0
    Ха! ОК, проблема не в HTML или CSS. Слабая линия, которую вы видите, вызвана тем, что браузер отображает изображение с краем сглаживания. Это создает одну линию пикселя, которая составляет половину непрозрачности. Теперь возникает вопрос ... Как отключить сглаживание изображений? Вот несколько вопросов, которые я нашел. productforums.google.com/forum/#!topic/chrome/AIihdmfPNvE productforums.google.com/forum/#!topic/chrome/Y-L2iILE0-c
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню