Кросс-браузер W3C совместимый полупрозрачный цвет фона - PullRequest
Новая
       15

Кросс-браузер W3C совместимый полупрозрачный цвет фона

1 голос
/ 28 сентября 2011

Для установки полупрозрачного фона я использую: 

background-color: rgba(0, 120, 180, 0.8);

Для IE, который не поддерживает rgba Я использую 1x1 PNG того же цвета: 

background-image: url(http://i53.tinypic.com/2mgtu9e.png);

( демо здесь )

Вопрос 1

Я знаю, что есть другой метод для IE, который использует фильтры.

Считается ли этот метод совместимым с W3C?

Вопрос 2

Скажем, я объединяю 20 изображений 1x1 png в один спрайт.

Как я могу использовать этот спрайт для установки цвета фона элемента в соответствии с 7-м пикселем в спрайте?

Ответы [ 3 ]

1 голос
/ 28 сентября 2011

Как уже говорили другие, никакие IE-фильтры не совместимы с W3C. Они также несут значительные накладные расходы и имеют последствия для производительности. Если я не ошибаюсь, когда фильтр применяется к элементу HTML, он будет применяться ко всему в этом элементе, включая его текст. Таким образом, вы также получите полупрозрачный текст. Может быть, есть способ предотвратить это, но я не сталкивался с этим. Также бывают случаи, когда фильтры IE не очень хорошо работают с полупрозрачными PNG, как в этой статье упоминается .

Говоря о PNG, идея использования спрайта действительно работает, только если у вас есть конкретная высота или ширина или оба. Так что это действительно не сработает для того, что вам нужно, как сказал Мерианос Никос. Также мозаичное изображение 1x1 - действительно ужасная идея. Я говорю это потому, что при этом возникают проблемы с производительностью, особенно в IE6. Хотя IE6 может и не беспокоиться об этом, мозаика такого маленького изображения по-прежнему приводит к снижению производительности, поскольку браузер должен рисовать и перерисовывать все до единого. См. Эту запись StackOverflow .

В этой ситуации я бы использовал что-то вроде Modernizr , что сделает rgba доступным для использования в браузерах, которые не поддерживают rgba. После настройки загрузки только для rgba и нескольких других вещей (HTML5 shim, yepnope и добавление классов CSS) загрузка составила 6,1 КБ. Не слишком удачный способ облегчить разработку.

Обновление Я ошибся, когда сказал, что Modernizr включает rgba. Он этого не делает, но сообщит, что в браузере включена функция rgba. Он добавит классы к тегу html, который расскажет вам о возможностях браузера.

0 голосов
/ 28 сентября 2011

Вопрос 1: CSS3please . Рамка-градиент показывает, как использовать MS-фильтр.

Чтобы проверить правильность: W3C CSS validator . Я получаю ошибки, поэтому я думаю, что это не считается действительным CSS

0 голосов
/ 28 сентября 2011

Ответ # 1

Этот метод не совместим с W3C.То, как Internet Explorer использует фильтры, не является обычным.Фильтры вообще не поддерживаются из спецификации W3C.Фильтры являются подключаемыми модулями Internet Explorer.

Ответ # 2

Нет возможности использовать их.В спрайтах вы можете использовать только изображения, которые не повторяются в фоновом режиме.

Например: скажем, что у вас есть следующий спрайт 

x   y   z<br />
r   t   s<br />
u   v   a

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

...