Как я могу получить IE Filter & CSS Transparent Background для совместного отображения? - PullRequest
Новая
       13

Как я могу получить IE Filter & CSS Transparent Background для совместного отображения?

1 голос
/ 22 июня 2011

Я пытаюсь получить прозрачный PNG и градиент для отображения в IE.Прямо сейчас фильтр доминирует над фоновым изображением.Если я достану фильтр, PNG отобразится.В идеале я бы хотел, чтобы PNG был на вершине градиента.

CSS: 

.defaultSelection {
    border: 1px solid #bbb; color: #222222; outline: 0 none; 
    background: url('/img/dropdown-arrow.png') right center no-repeat; 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e9e9e9', endColorstr='#ffffff' )
}

HTML: 

<li class="defaultSelection">Current Selection</li>

Ответы [ 3 ]

1 голос
/ 23 июня 2011

Хорошие новости: возможно с в IE (несмотря на то, что говорили другие). Но для этого нужен небольшой взлом под названием CSS3Pie .

CSS3Pie - это хак для IE, который позволяет поддерживать различные функции CSS3, используя обычный CSS, а не эти ужасные стили filter.

См. Здесь о поддерживаемых функциях: http://css3pie.com/documentation/supported-css3-features/

Вы заметите, что сюда входит возможность указать фон с изображением и градиентом:

Как описано на приведенной выше странице, просто укажите свой CSS с -pie-background в дополнение к обычному стилю background, а также со стилем Pie behavior для запуска сценария Pie. 

#myElement {
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*webkit*/
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
    behavior: url(PIE.htc);
}

За кулисами CSS3Pie создает элемент VML и накладывает на него слой реального элемента для достижения желаемых эффектов (VML - это язык векторной графики, который поддерживается в IE6 и более поздних версиях). Но вам не нужно ничего знать об этом, поскольку Pie делает все возможное, чтобы сделать себя полностью прозрачным для разработчика и пользователя. У него есть некоторые ошибки и известные проблемы, но в целом это очень очень хороший инструмент для доведения старых версий IE до некоторого соотношения с более современными браузерами.

0 голосов
/ 23 июня 2011

Это невозможно с IE, так как градиент фильтра - это, по сути, другое фоновое изображение (оно занимает свое место.) Попробуйте поменять порядок, чтобы фильтр был первым, а изображение bg последним в селекторе CSS, вы, скорее всего, увидите изображение.

Ваш лучший выбор - использовать многослойность или сделать PNG с изображением и прозрачностью.

0 голосов
/ 22 июня 2011

Вы пытались использовать градиент для li и затем применить изображение к элементу в li?

<li class="defaultSelection">Current Selection<span class='bg'>&nbsp;</span></li>

.defaultSelection {
border: 1px solid #bbb; color: #222222; outline: 0 none; 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,  startColorstr='#e9e9e9', endColorstr='#ffffff' )
}
.defaultSelection .bg{
   display:inline-block; 
   width: 10px;
   height:10px;
   background: transparent url('/img/dropdown-arrow.png') right center no-repeat;
}
...