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

Question

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

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

Answer 1

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

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

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

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

Answer 2

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