Полупрозрачный фон в CSS (Opacity)Подкинули мне работенку сверстать сайт. А дизайн мне предоставили в клеточку. Основной фон в темную клетку, а блоки в светлую. И вот начала я ломать голову, как же так сделать, чтобы клетка в клетку попадала. Пыталась нарезать и так и сяк, и что-то не клеится. И вдруг стукнуло мне в голову, ведь я не одна такая, и явно все уже придумано и создано. И, о чудо! Сразу нашла то, что мне нужно! Как говорится, век живи, век учись! Отыскала два способа. 1. Прозрачность фона и всего блока в целом. В css вставить строчку: opacity:0.65; Например, мне надо было сделать фон для div полупрозрачным, чтобы просвечивалась клетка, я написала вот что:
Но, к сожалению, это работает везде кроме IE. Ох, как же я не переношу этот Explorer. C удовольствием бы удалила его вообще с компа, чтобы глаза мои его не видели :-)) Но... ради тестирования сайтов приходится с ним жить... да еще и в хороших отношениях :-) В общем, чтобы это заработало в IE 6 и 7, добавляем следующую строчку:
2. Прозрачный фон и непрозрачные внутренности
Цвет здесь задается в формате RGBа. Последняя цифра 0,5 - процент прозрачности. Ну и как обычно для IE специальная строка:
Задаем цвета градиента: начальный (startColorstr) и конечный (endColorstr) - я указала один цвет (#b2b2b2). Здесь немного наоборот, прозрачность определяют первые две цифры (50). Вот только не знаю, как будет работать в 8 версии. Так до сих пор и не установила ее. Проверю - допишу :-) Кстати, моему бложику 1 апреля стукнул 1 годик Постоянно в день рождения своих блогов все пишут различные показатели, хвастаются успехами, и... зачем-то публикуют суммы заработанных на нем денег... Но мне хвастаться нечем, т.к. блог веду для своего удовольствия :-) Мой блог - это мое маленькое хобби ![]() |
Большое спасибо )
Спасибо, отличная подсказка! А как применить прозрачность к бэкграунду - картинке? Через opacity прозрачность добавляется к самому сайту, а бэкграунд остается непрозрачным...
солнышко!!! работает чудесно)) спасибо большое!!!
У меня наконец-таки всё получилось! Благодарю)
после чего в ксс писать opacity чтобы фон стал прозрачным?
Офигительно. Спасибо огромное!
Спасибо! удачи во всём!
супер!!! спасибо!!!
Благодарю, то что нужно, коротко и ясно)
Одно замечание: как я заметил - в строке
startColorstr=#50b2b2b2,endColorstr=#50b2b2b2
все значения в 16-ти ричной системе - для именно 50% прозрасности нужно ставить 80
#80b2b2b2
Тогда для IE будет строго то же, что и
background-color: rgba(178,178,178,0.5);
большое спасибо)))
Спасибо!
В ИЕ8 последней версии работает!
Также как и в Мозилле, Опере, Хроме.
Спасибо!
респект автору
Очень помогла статейка, спасибо!!
сейчас этим занимаюсь. Получается, спасибо
Спасибо за хорошую подсказку
спасибо помогло!!
Cпасибо попробывал работает!
Спасибо! вот как раз нашел эту статью по заросу прозрачный фон ЦСС -- верстаю счас =)
Сделал все по инструкции, очень обрадовался, когда увидел, что работает даже в ИЕ6, НО полупрозрачный фон через background-color: rgba() НЕ РАБОТАЕТ в Опере. Попытался найти способы в сети - нормального ничего не нашел, только с жесткой привязкой по координатам есть способ, однако он не всегда подходит. Пришлось сделать через png.
Ваша статья единственная, написанная для людей! Только прочитав её смог добиться желаемого. А до этого читал очень много всяких форумов...
В 6-м IE работает. Завтра узнаю про 7 и 8-ой. А в опере не работает. И как IE узнал, что градиент задаётся именно фону - вопрос риторический...
О да... Я на работе в последнее время получал очень много заданий по проблемам с ИЕ, так что я в последний месяц столкнулся с огромным количеством хаков. Больше всего меня бесит, как ИЕ высчитывает высоту и ширину. Просто раздирает. А отсуствие прозрачности - только сегодня мучался с ней. Самая жесть, когда один элемент имеет прозрачность плюс png картинка на фоне :)
Рад что, блог цветёт! Желаю дальнейшего процветания!
Подскажите плз, надо ли обращение к фильтру обертывать в [IF IE], или достаточно просто прописать его в CSS? Собственно, у меня не срабатывают ни тот, ни другой способы. Уже запарился разбираться, вообще подозреваю что у меня просто IE глючит.
Сергей, с таким я еще не сталкивалась... Если что напишу об этом :-)
Спасибо статья очень интересная :-)
Но возник вопрос, а если я хочу сделать градиент с помощью CSS? Это вообще возможно? Если быть точнее мне нужна горизонтальная полоса с градиентом от правого угла к левому. От верхнего к нижнему делается очень просто с помощью маленькой картинки и все это дело просто заполняется. Но как сделать горизонтальный ума не приложу. Сайт не фиксированной ширины и в этом проблема.
Отправить комментарий