Как лучше всего отобразить прозрачное изображение на веб-сайте?

#css #internet-explorer-6 #png #transparent

#css #internet-explorer-6 #png #прозрачный

Вопрос:

Я работаю с CSS много лет, но всегда старался держаться подальше от прозрачных изображений или фонов из-за отсутствия поддержки в старых браузерах. Прямо сейчас мне нужно создать закругленные границы, и я знаю, что вы можете сделать это в CSS3, но с таким же успехом я могу использовать изображение в формате .png. Ни то, ни другое не поддерживается в ie6 — за исключением исправления в формате .png для ie6, которое, кажется, иногда работает — поэтому мне интересно, каков наилучший подход.

25% моих зрителей используют ie6 (большинство из стран Ближнего Востока), поэтому, хотя я хотел бы притвориться, что ie6 не существует, я должен.

Комментарии:

1. Просто используйте исправление в формате PNG. Это работает не только «иногда» — это работает в большинстве случаев.

2. Есть ли какой-либо способ сопоставить фон вашего изображения с фоном вашей страницы? Если вы не можете, то лучшим выбором будет исправление в формате PNG.

Ответ №1:

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

Учтите тот факт, что использование .png — не лучший выбор с точки зрения доступности для пользователей с ослабленным зрением.

Для пользователей, которым требуется увеличить размер шрифта для чтения текста на экране, текст может в конечном итоге отображаться за пределами контейнера с фоном .png и в этих случаях может стать нечитаемым.

Возможно, лучшим вариантом будет использовать css3 для оформления контейнера и вернуть ему квадратные углы для пользователей IE.

Ответ №2:

Если единственное, что вам нужно, это закругленные углы, используйте CSS3 border-radius и зайдите в PIE.htc для поддержки IE6. Вероятно, это самый простой способ добиться этого.