Сделать цвет фона класса прозрачным? - PullRequest
Новая
       6

Сделать цвет фона класса прозрачным?

3 голосов
/ 08 февраля 2010

Я делаю сайт, который использует только тематику для jquery-ui.

Ну, в моем приложении мне нужно чередовать цвета для каждой строки в списке. Прямо сейчас все строки имеют цвет .ui-widget-content. Ну, я могу без проблем применить класс к чередующимся строкам, но я хочу, чтобы чередующийся цвет был очень прозрачной версией цвета фона в .ui-widget-header. Как бы я сделал это, используя ничего, кроме HTML JQuery и CSS? (Я действительно надеюсь, что мне не придется использовать javascript, чтобы сделать этот маленький трюк)

Ответы [ 3 ]

3 голосов
/ 09 февраля 2010

Самый простой способ сделать это - создать небольшое плоское изображение в Photoshop, Fireworks, GIMP, Kreta и т. Д. И установить там цвет / непрозрачность. Вышеуказанные решения позволят прозрачность, но они

1) Не соответствует стандартам и

2) Они могут привести к тому, что текст, содержащийся в div, также будет прозрачным (обычно нежелательный результат в дизайне).

Итак ... 

.ui-widget-content-alt {
background: transparent url(images/my_80%transparent_black_bg.png) top left repeat;
}
.ui-widget-content {
background: transparent url(images/my_80%transparent_white_bg.png) top left repeat;
}
2 голосов
/ 08 февраля 2010

Предполагая, что я не понял вашего вопроса, и что вы можете использовать отдельный класс CSS для альтернативных строк, таких как .ui-widget-content-alt, вы можете использовать следующий CSS: 

.ui-widget-content, .ui-widget-content-alt {
    background-color: #000;
}

.ui-widget-content-alt {
    filter: alpha(opacity=20);
    opacity: 0.2;
}
  • Свойство opacity является стандартом CSS для значений непрозрачности и работает в Firefox, Safari, Chrome и Opera.
  • Свойство фильтра предназначено для IE.

Вы можете проверить следующую статью на совместимость свойства opacity со старыми браузерами:

0 голосов
/ 08 февраля 2010

Нет стандартного способа сделать это.

Вы можете использовать непрозрачность CSS и Fiter для достижения этого.

Что-то вроде следующего даст вам 80% черного прозрачного цвета 

    .someClass { background-color:#000; -moz-opacity: 0.8; opacity:.80;filter: alpha(opacity=80);}

Использование этого приведет к тому, что ваш CSS не пройдёт проверку соответствия.

...