Прозрачность png файлов в IE - PullRequest
Новая
       2

Прозрачность png файлов в IE

0 голосов
/ 29 июля 2010

Я настроил его в css, чтобы фон имел изображение немного больше, чем раздел содержимого, чтобы за ним была тень, повторяющаяся в направлении y, но в IE он не показывает прозрачность.Я использовал Google, чтобы попытаться решить эту проблему без удачи, сделав изображение в CSS.

CSS: 

#shadow{
width:854;
margin-left:auto;
margin-right:auto;
text-align:left;
background-image:url(shadow.png);
background-repeat:repeat-y;
}

HTML: 

<div id="shadow">
</div>

Любая помощь очень ценится, так как я нахожусь в полной потере на этом.

Ответы [ 4 ]

7 голосов
/ 29 июля 2010

Если это возможно, вы делаете png gif, и все счастливы.

Если это невозможно, я использую только IE, css behavior.

С помощью behavior вы можете создать ссылку на htc-файл, подобный найденному здесь: http://www.twinhelix.com/css/iepngfix/

Затем вам нужно будет добавить CSS вроде:

behavior: url(iepngfix.htc)

3 голосов
/ 29 июля 2010

IE7 поддерживает прозрачность PNG.Если вы хотите поддерживать IE6, вы можете использовать что-то вроде строба браузера (что является уродливым хаком).

Используйте в вашем CSS селекторы, которые IE <7 не поддерживает: </p> 

html>body #transparent_png {
    background: url(gfx/transparent_png.png);
    background-repeat: no-repeat;
} 

#transparent_png {
    /* additional properties here */
}

стиль html> body #transparent_png игнорируется IE6.Затем мы используем уродливый фильтр DXImageTransform в отдельном файле .css для прозрачного отображения png в IE6.Но этот css должен быть загружен только если версия ie меньше 7:

html header: 

<!--[if lt IE 7]>
    <style type="text/css" media="screen, projection">
    @import "iefixes.css";  
    </style>
<![endif]-->

iefixes.css содержит что-то вроде этого: 

#transparent_png {
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png');

}

К сожалению, этот фильтр не поддерживает repeat-x или repeat-y.Но с этим взломом гейта вы могли бы отобразить уродливую размытую тень gif для IE 6 вместо более приятной тени png:).

Но есть также свойство sizingMethod для фильтра DXImageTransform (смотрите http://msdn.microsoft.com/en-us/library/ms532920%28VS.85%29.aspx),, чтобы вы могли масштабировать изображение до размера его элемента контейнера: 

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png',sizingMethod='scale');
1 голос
/ 29 июля 2010

Очень хорошее исправление png для IE6 можно найти здесь

Я использовал его и могу заверить, что он работает.

Хотя это JS, но большинство людей в последнее время включили его

1 голос
/ 29 июля 2010

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

Лучшее, что я нашел, это: DD_belatedPNG.js

, он работает как дерево и очень прост в использовании.

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

...