• Техногрет
  • Показываем PNG в IE

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Владимир Токмаков

    январь 2005


    Задача.

    Показать в IE изображения с полупрозрачными областями.

    Предлагаем вариант использования «сложного» формирования изображений. Он позволит значительно уменьшить объем графических файлов и добиться сносного их отображения в IE версий ранее 5.5. Недостатки — трудоемкость и ограниченное количество цветов в формате GIF.

    Как это выглядит в браузере

    Knorr ® + Knorr ® = Knorr ®
    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36 
    37 
    38 
    39 
    40 
    41 
    42 
    43 
    44 
    45 
    <style type="text/css">
        #body_png
        {
            background-image: url('grid-10.gif');
            padding: 1em;
        }
        #body_png img
        {
            vertical-align: middle;
        }
        .png
        {
            //background-image: none ! important;
            /*
                не забудьте особенность конструкции
                behavior: url(...)
                путь должен быть абсолютным
            */
            behavior: url('pngfix.htc');
        }
    </style>
    <div id="body_png">
        <img
            src="logo.png"
            width="175"
            height="135"
            alt="Knorr &reg;"
        />
        +
        <img
            src="logo.gif"
            width="175"
            height="135"
            alt="Knorr &reg;"
        />
        =
        <img
            src="logo.gif"
            style="background-image: url('logo.png');"
            class="png"
            width="175"
            height="135"
            alt="Knorr &reg;"
        />
    </div>