Как преобразовать RGBA в фильтр для старых браузеров IE

0

У меня есть следующий код CSS, который устанавливает фон в цвет с непрозрачностью:

    #second-menu-navi a {
        float:left;
        width:125px;
        height:40px;
        line-height: 40px;
        vertical-align: middle;
        font-size:11px;
        color:#ffffff;
        text-decoration: none;
        background: rgb(1, 55, 97);
        background: rgba(1, 55, 97, .85); /*#013761; /*url('theImages/nav_menu_85_b.png') repeat; /*#013761;*/
        margin:0 3px 0 0 !important;
        /*background-image: none !important;*/
        padding:0 !important;

        -moz-border-radius-bottomleft: 4px; 
        -webkit-border-bottom-left-radius: 4px; 
        -khtml-border-bottom-left-radius: 4px; 
        border-bottom-left-radius: 4px;

        -moz-border-radius-bottomright: 4px; 
        -webkit-border-bottom-right-radius: 4px; 
        -khtml-border-bottom-right-radius: 4px; 
        border-bottom-right-radius: 4px;

        outline:none;

        filter:filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);
        /* For IE 8*/
        -ms-filter: "filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);";
    }
#tab-1:active, #tab-1:hover {
    background-color: #155E9B;
}
#tab-2:active, #tab-2:hover {
    background-color: #159B77;
}
#tab-3:active, #tab-3:hover {
    background-color: #1E9B15;
}
#tab-4:active, #tab-4:hover {
    background-color: #356101;
}
#tab-5:active, #tab-5:hover {
    background-color: #9B2B15;
}
#tab-6:active, #tab-6:hover {
    background-color: #9B1574;
}
#tab-7:active, #tab-7:hover {
    background-color: #70159B;
}
#break-line-2 {
    width:100%;
    height:7px;
    border-top:1px solid #02233C;
    background-color:#013761;
    position: fixed;
    top: 62px;
}

HTML:

<div id="second-menu-navi" class="navi">
            <a href="" id="tab-1">Why Choose Us</a>
            <a href="" id="tab-2">Physicians</a>
            <a href="" id="tab-3">Medical Specialties</a>
            <a href="" id="tab-4">Locations</a>
            <a href="" id="tab-5">Urgent Care</a>
            <a href="" id="tab-6">Radiology</a>
            <a href="" id="tab-7">Lab</a>
        </div>
</div>

Он отлично работает в FF/Chrome/IE> = 10.

Как отредактировать коды фильтров, чтобы он отображал то же самое в IE, который не поддерживает rgba()?

Теги:
internet-explorer
internet-explorer-8

2 ответа

2
Лучший ответ

Быстрый поиск в Google дает мне этот сайт, который имеет простой конвертер. Введите свой код RGBA, он выдает фильтр для вас...

http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

С преобразователем это: rgba(1, 55, 97,.85)

Становится этим...

{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8013761,endColorstr=#D8013761)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8013761,endColorstr=#D8013761);   /* IE6 & 7 */
      zoom: 1;
}
  • 0
    Единственная проблема, которая встречается сейчас, это когда сплошной фоновый цвет используется при наведении, он также использует ту же непрозрачность. Когда пользователь наводит курсор на каждую вкладку меню, я хочу, чтобы прозрачность исчезла и показала сплошной цвет.
  • 1
    @ SiKni8 - я не уверен, что понимаю, что именно вы хотите с точки зрения внешнего вида. Какого желаемого эффекта вы хотите достичь? Если вы хотите, чтобы элемент имел BG-цвет с небольшой непрозрачностью, то при наведении курсора элемент снова получает всю непрозрачность и снова становится сплошным, тогда это должно быть так же просто, как изменить все непрозрачности на 1 с помощью нового селектора: hover.
Показать ещё 1 комментарий
1

Попробуйте поместить линию -ms-filter перед filter, иначе она не будет работать для IE8. См. Это сообщение в блоге для получения некоторой информации об этом и этом комментарии CSSTricks.

  • 0
    имеет смысл. Благодарю. Единственная проблема, которая встречается сейчас, это когда сплошной фоновый цвет используется при наведении, он также использует ту же непрозрачность. Когда пользователь наводит курсор на каждую вкладку меню, я хочу, чтобы прозрачность исчезла и показала сплошной цвет.
  • 0
    @ SiKni8 Этот SO ответ может помочь там.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню