Суть проблеми
Дуже часто дизайнери використовують в своїх макетах різні тіні, світіння та інші елементи з напівпрозорими областями. При верстці це виливається в складності, пов'язані з тим, що напівпрозорість png сприймається не всіма браузерами. Одним з нерозуміючих альфа-канал є улюблений internet explorer 6. В результаті доводиться позбуватися від png-напівпрозорої, що явно незручно в більшості випадків.
Рішення проблеми з png бекграундом для ie
Бекграунд png будемо вставляти через стилі css окремо для ie6 і окремо для інших браузерів. В html-коді нам бпонадобітся окремий блок div з id = "png-image".
# Png-image height: 200px; / * Значення висоти і ширини вказуємо як розмір картинки * /
width: 210px;
background: url (image.png); / * Пишемо бекграунд для нормальних браузерів * /
-background: none; / * Прибираємо бекграунд для ie6 * /
-filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = 'image.png', sizingMethod = 'scale'); / * Довантажувати напівпрозорий png для ie6 * /
>
Ось як це виглядає:
Цей png вставляється як фон для блоку.
Такі елементи дизайну, як тіні або світіння слід робити таким способом.
При зміні розмірів блоку з id = "png-image" напівпрозорий png буде розтягуватися або стискатися разом з блоком.
Напівпрозорий png у вигляді картинки
Якщо ж прозора або напівпрозора png-картинка не є елементом дизайну, то показати її в ie 6 можна наступним чином. В html-код вставляємо звичайний тег img з атрибутом style:
Створюємо файл png.htc такого змісту і зберігаємо його в папці img:
Також знадобиться прозора gif-картинка transparent.gif. Її потрібно зберегти в папці разом з png.htc.
Так наш png виглядає в ie6 і інших браузерах:
А цей png вставляється тегом img, а не бекграундом.