Создание дизайн-шаблонов; уроки Photoshop, Illustrator, Lightroom, Gimp; обои для рабочего стола; иконки и headers для блогов.
Главная Фотоальбом Обо мне Карта блога
Подпишись на RSS!

Полупрозрачный фон в CSS (Opacity)

Подкинули мне работенку сверстать сайт. А дизайн мне предоставили в клеточку. Основной фон в темную клетку, а блоки в светлую. И вот начала я ломать голову, как же так сделать, чтобы клетка в клетку попадала. Пыталась нарезать и так и сяк, и что-то не клеится. И вдруг стукнуло мне в голову, ведь я не одна такая, и явно все уже придумано и создано. И, о чудо! Сразу нашла то, что мне нужно! Как говорится, век живи, век учись!

Отыскала два способа.

1. Прозрачность фона и всего блока в целом.

В css вставить строчку: opacity:0.65;

Например, мне надо было сделать фон для div полупрозрачным, чтобы просвечивалась клетка, я написала вот что:

.myclass {background: #b2b2b2; opacity:0.55;} 

Но, к сожалению, это работает везде кроме IE. Ох, как же я не переношу этот Explorer. C удовольствием бы удалила его вообще с компа, чтобы глаза мои его не видели :-)) Но... ради тестирования сайтов приходится с ним жить... да еще и в хороших отношениях :-) В общем, чтобы это заработало в IE 6 и 7, добавляем следующую строчку:

filter:alpha(opacity=55);

2. Прозрачный фон и непрозрачные внутренности

.myclass {background-color: rgba(178,178,178,0.5);}

Цвет здесь задается в формате RGBа. Последняя цифра 0,5 - процент прозрачности.

Ну и как обычно для IE специальная строка:

filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#50b2b2b2,endColorstr=#50b2b2b2);

Задаем цвета градиента: начальный (startColorstr) и конечный (endColorstr) - я указала один цвет (#b2b2b2). Здесь немного наоборот, прозрачность определяют первые две цифры (50).

Вот только не знаю, как будет работать в 8 версии. Так до сих пор и не установила ее. Проверю - допишу :-)

Кстати, моему бложику 1 апреля стукнул 1 годик  victory

Постоянно в день рождения своих блогов все пишут различные показатели,  хвастаются успехами, и... зачем-то публикуют суммы заработанных на нем денег...  Но мне хвастаться нечем, т.к. блог веду для своего удовольствия :-) Мой блог - это мое маленькое хобби  grimace

Роман
16 Март, 2015

Большое спасибо )


Андрей
7 Март, 2013

 Спасибо, отличная подсказка! А как применить прозрачность к бэкграунду - картинке? Через opacity прозрачность добавляется к самому сайту, а бэкграунд остается непрозрачным...


Гость
7 Сентябрь, 2012

солнышко!!! работает чудесно)) спасибо большое!!! 


Натали
23 Февраль, 2012

У меня наконец-таки всё получилось! Благодарю)


Гость
28 Январь, 2012

после чего в ксс писать opacity чтобы фон стал прозрачным?


Вася
10 Декабрь, 2011

 Офигительно. Спасибо огромное!


Totoha
7 Ноябрь, 2011

 Спасибо! удачи во всём!


Гость
25 Август, 2011

 супер!!! спасибо!!!


Владислав
22 Май, 2011

Благодарю, то что нужно, коротко и ясно)

Одно замечание: как я заметил - в строке

startColorstr=#50b2b2b2,endColorstr=#50b2b2b2

все значения в 16-ти ричной системе - для именно 50% прозрасности нужно ставить 80

#80b2b2b2

Тогда для IE будет строго то же, что и 

background-color: rgba(178,178,178,0.5);


http://muzik-mp3.ucoz.ru/
20 Март, 2011

большое спасибо)))


Aurumseo
12 Февраль, 2011

Спасибо!

В ИЕ8 последней версии работает!

Также как и в Мозилле, Опере, Хроме.


Юлия
7 Февраль, 2011

Спасибо!


Richard
29 Июль, 2010

 респект автору


Никита
9 Апрель, 2010

Очень помогла статейка, спасибо!!


Ninona
19 Февраль, 2010

сейчас этим занимаюсь. Получается, спасибо


Sergunya
17 Февраль, 2010

Спасибо за хорошую подсказку


Antya
31 Январь, 2010

спасибо помогло!!


Alesha
31 Январь, 2010

Cпасибо попробывал работает!


Алекс
22 Октябрь, 2009

Спасибо! вот как раз нашел эту статью по заросу прозрачный фон ЦСС -- верстаю счас =)


Доктор
15 Июль, 2009

Сделал все по инструкции, очень обрадовался, когда увидел, что работает даже в ИЕ6, НО полупрозрачный фон через background-color: rgba() НЕ РАБОТАЕТ в Опере. Попытался найти способы в сети - нормального ничего не нашел, только с жесткой привязкой по координатам есть способ, однако он не всегда подходит. Пришлось сделать через png.


Dаниил
28 Май, 2009

Ваша статья единственная, написанная для людей! Только прочитав её смог добиться желаемого. А до этого читал очень много всяких форумов...

В 6-м IE работает. Завтра узнаю про 7 и 8-ой. А в опере не работает. И как IE узнал, что градиент задаётся именно фону - вопрос риторический...


W32Blaster
4 Май, 2009

О да... Я на работе в последнее время получал очень много заданий по проблемам с ИЕ, так что я в последний месяц столкнулся с огромным количеством хаков. Больше всего меня бесит, как ИЕ высчитывает высоту и ширину. Просто раздирает. А отсуствие прозрачности - только сегодня мучался с ней. Самая жесть, когда один элемент имеет прозрачность плюс png картинка на фоне :)

Рад что, блог цветёт! Желаю дальнейшего процветания!


TropicCamel
27 Апрель, 2009

Подскажите плз, надо ли обращение к фильтру обертывать в [IF IE], или достаточно просто прописать его в CSS? Собственно, у меня не срабатывают ни тот, ни другой способы. Уже запарился разбираться, вообще подозреваю что у меня просто IE глючит.


JuliettaRose
26 Апрель, 2009

Сергей, с таким я еще не сталкивалась... Если что напишу об этом :-)


Сергей
5 Апрель, 2009

Спасибо статья очень интересная :-)

Но возник вопрос, а если я хочу сделать градиент с помощью CSS? Это вообще возможно? Если быть точнее мне нужна горизонтальная полоса с градиентом от правого угла к левому. От верхнего к нижнему делается очень просто с помощью маленькой картинки и все это дело просто заполняется. Но как сделать горизонтальный ума не приложу. Сайт не фиксированной ширины и в этом проблема.

Отправить комментарий

Не показывается.
Image CAPTCHA

Услуги по созданию дизайна; верстка



© JuliettaRose, 2008-2017. При использовании материалов ссылка на источник обязательна.
Яндекс.Метрика