Прозрачность, полупрозрачность - вся правда о них.

[Трубчатый Кот]

Я удалил картинку http: //static.diary.ru/userdir/9/3/1/2/93120/17332882.png из своей БИ, чтобы больше никому в голову не пришло использовать инстукцию про полупрозрачный фон, не дочитав ее до конца!

1. Сначала уясним разницу.

Прозрачный фон - это когда на фоне нет ничего вообще. Ни цветовой заливки, ни картинки.
Полупрозрачный фон - это когда фон, не поверите, полупрозрачный ) например бледно-розовый, через который просвечивает фоновая картинка дневника.
Полупрозрачность - а вот это когда полупрозрачно все - фон, текст и картинки. У меня, например, полупрозрачное меню.

2. Как это всё делается.

Прозрачный фон

Прозрачный фон делается проще всего. Достаточно просто отключить цвета фона в настройках оформления - там, где у вас указан цвет в виде #FFAA00, надо оставить только решетку # или просто пустое место. Это стоит сделать в любом случае, если вы собираетесь работать с полупрозрачностью.

Если этого мало - прозрачность можно форсировать так:
*element* {background: transparent;}
Про то, что такое *element* - в конце поста.

Полупрозрачность

Полупрозрачность делается сложнее, но не сильно.
Вот так:
*element* {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45);}
Вместо 45 - нужный процент прозрачности )
100% соответствует полной непрозрачности и задается так:
*element* {-moz-opacity:1.0 !important;opacity:1.0 !important; filter:alpha(opacity=100);}

Если вдруг у вас не работает полупрозрачность в Internet Explorer.

Такое может быть, если вы пытаетесь назначить прозрачность элементу, для которого не указана высота или ширина.
В этом случает полупрозрачность прописывается так:
*element* {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); zoom: 1;}

Если всё равно не работает
Ответ только один - меняйте то, что вы прописывали вместо *element* Много элементов можно использовать в качестве синонимов. Про то, что такое *element*, напоминаю - в конце поста.

Полупрозрачный фон

Самое сложное. Увы. Включайте мозг )

СПОСОБ I

Плюсы: Самая трушная полупрозрачность фона.
Минусы: Фон может быть только сплошным полупрозрачным цветом, без картинок.
1. Берём из фотошопа цвет и прозрачность. Для примера, пусть это будет #11AAFF / rgb(17,170,255) и 75% — скриншот, где смотреть в фотошопе.
2. Добавляем CSS:
*element*
{
background:rgba(17, 170, 255, 0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BB11AAFF,endColorstr=#BB11AAFF);
zoom:1;
}

Первая строчка задаёт цвет в режиме rgba: (красный, зелёный, синий, прозрачность), цвета могут быть от 0 до 255, а прозрачность от 0 до 1.
Вторая строчка для IE, который не понимает rgba: дважды задаём цвет в специальном формате #AARRGGBB, где первые две цифры обозначают прозрачность от 00 до FF, а дальше обычная шестнадцатиричная запись цвета.

СПОСОБ II

Плюсы: Трушная полупрозрачность фона.
Минусы: Бывают глюки с отступами, которые никак, кроме ручной правки не исправляются. Я в свое время справился.
1. Делаем полупрозрачный PNG в Фотопопе или другом редакторе, кладем себе в Библиотеку изображения.
В фотошопе так: создаем картинку 10 на 10 px c фоном Transparent, берем заливку, устанавливаем opacity в нужное количество процентов и заливаем нужным цветом. Сохранять в PNG (если просит уточнить - PNG-24)
2. Полупрозрачный фон нужным элементам прописывается так:
*element*
{
background: none;
background: url('/userdir/9/3/1/2/93120/17332882.png') repeat bottom right !important;
background-image: none;
filter: progidЭТО ОФИГЕННО ВАЖНЫЙ ПУНКТ! Забудете - не будут работать ссылки в Internet Explorer
*element* a, *element* input, textarea
{
position:relative; z-index: 2;
}

4. Если ники скачут, прибиваем их гвоздями:
.authorName { float:none;}

СПОСОБ III

Плюсы: Никаких глюков, короткий и простой код, работает всегда и везде.
Минусы: Не катит на фиксированном фоне и в некоторых других случаях.

Это не столько способ, сколько чит.
На самом деле эффекта полупрозрачности фона можно добиться, просто назначив точно такой же фон элементу, но подредактированный в графическом редакторе.

Что такое *element*?

*element* - это штука, которую надо заменить на то, к чему бы собираетесь применить эффект
например
#side .bordered - меню
#side .menuSection - отдельные блоки меню
#page-t .bordered - блок записей

Т.е. код для полупрозрачности всего блока меню будет выглядеть так:

#side div.bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); }

Спасибо за внимание

З.Ы. Еще раз кто-то запостит новой темой вопрос про прозрачность - поубиваю ))
!СЛАВА РОБОТАМ!

@темы: фоновые картинки, основные блоки

Comments

Рёцке Рёцке а как сделать эпиграф прозрачны?
я написал #epigraph#{background: transparent}
не помогло((((

[муравей штата Вой]

V.Azazello, вторая # явно лишняя. попробуй:
#epigraph{background: transparent;}

муравей штата Вой пробовал!
тоже ничего((((((
может это из-за того, что у меня посты сплошной калонкой, а не табличками?

[муравей штата Вой]

V.Azazello, возможно эпиграф у тебя прозрачный, но под ним какой-то другой слой - нет.
попробуй плясать от обратного: сделай прозрачным весь фон записей, а потом закрашивай всё кроме эпиграфа.

муравей штата Вой скажите коды!

[муравей штата Вой]

"Прозрачный фон делается проще всего. Достаточно просто отключить цвета фона в настройках оформления - там, где у вас указан цвет в виде #FFAA00, надо оставить только решетку # или просто пустое место. Это стоит сделать в любом случае, если вы собираетесь работать с полупрозрачностью."

заливка как-нибудь так:
.singlePost.countSecond, .singlePost.countFirst {background-color:#00000000; }
..что получится - не знаю.)

муравей штата Вой .singlePost.countSecond, .singlePost.countFirst {background-color:#050505; }
дааа, вот этот код.
спасибо.

муравей штата Вой у меня тут такой вопрос я тут сделал полупрозрачность.
но проблема весьма неприятна. у меня записях картинки тоже стали полупрозрачными. что сделать, чтобы картинки и фото в записях стали нормальными.?

код у меня такой для записей:
#page-t .bordered {-moz-opacity:77 !important;opacity:77 !important; filter:alpha(opacity=77);}

[Фризыч]

V.Azazello

Полупрозрачность - а вот это когда полупрозрачно все - фон, текст и картинки. У меня, например, полупрозрачное меню.

так что делать другим способом.

air.raid.siren каким например?

[Фризыч]

V.Azazello, в посте и про полупрозрачный фон написано, и про всё, дерзайте

air.raid.siren спасибо.

[Britney Black]

Огромное спасибо!!!!

[Walterka]

Доброго времени суток. У меня проблема следующего характера. Сделал полупрозрачный фон записей и меню. В мозилле, опере и седьмом ИЭ все отображается прекрасно, как надо. Но, по словам очевидцев, в еретическом шестом internet explorer'е не отображается фон записи, и текст становится совершенно нечитабелен на основном фоне дневника. Это неисправимо или все же есть какой-то способ, кроме того, чтобы советовать обладателям еретического браузера качать новую версию или отключать изображения?

[.Femme douce]

по этому образцу делаю прозрачный фон всему блогу, прозрачным также становятся и фото и эпиграф, можно ли этого избежать? и как?

[Walterka]

Вы же делаете полупрозрачным фон ВСЕГО БЛОГА, как сами только что сказали. Логично, что полупрозрачным будет все: меню, фото, эпиграф, текст записей и картинки в ленте дневника/избранного. Читайте внимательнее. Если не хотите этого - ставьте на фон блога полупрозрачный пнг.

[.Femme douce]

pic.ipicture.ru/uploads/091120/92yh3yR4r1.jpg
вот что у меня получается
и хочется что б так и было а картинки не просвечивали если это возможно

СПОСОБ I

Плюсы: Трушная полупрозрачность фона.
Минусы: Бывают глюки с отступами, которые никак, кроме ручной правки не исправляются. Я в свое время справился.
1. Делаем полупрозрачный PNG в Фотопопе или другом редакторе, кладем себе в Библиотеку изображения.
В фотошопе так: создаем картинку 10 на 10 px c фоном Transparent, берем заливку, устанавливаем opacity в нужное количество процентов и заливаем нужным цветом. Сохранять в PNG (если просит уточнить - PNG-24)
2. Полупрозрачный фон нужным элементам прописывается так:
*element*
{
background: none;
background: url('/userdir/9/3/1/2/93120/17332882.png') repeat bottom right !important;
background-image: none;
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/9/3/1/2/93120/17332882.png', sizingMethod='scale');
zoom: 1;
}
Ссылка должна быть на СВОЮ картинку - ту, которую вы положили в БИ.
Она будет выглядеть приблизительно так: http: //static.diary.ru/userdir/9/3/1/2/93120/17332882.png
Посмотрите на код, посмотрите на вашу ссылку и вставьте по аналогии )


3. Для элементов, которым прописали полупрозрачноть, прописывам новое свойство ссылок
(не потеряйте a и input!):
ЭТО ОФИГЕННО ВАЖНЫЙ ПУНКТ! Забудете - не будут работать ссылки в Internet Explorer
*element* a, *element* input, textarea
{
position:relative; z-index: 2;
}

4. Если ники скачут, прибиваем их гвоздями:
.authorName { float:none;}

этот способ делает так
pic.ipicture.ru/uploads/091121/d3686Tau1a.jpg
и меня это нее устраивает

*#side div.bordered* {background: none; background: # repeat bottom right !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/4/7/1/1471473/53124566.png', sizingMethod='scale'); zoom: 1;}
*#side div.bordered* a, *#side div.bordered* input, textarea { position:relative; z-index: 2; }
#side div.bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); }


пытаюсь сделать полупрозрачный фон. с CSS только-только начинаю.
-что я не так прописываю?
доп инфо: ос-мак, браузер-сафари

заранее спасибо.

[Walterka]

macca, звездочки по краям объектов не нужны. В примере они стояли как кавычки.

[bokonist]

Обновил с разрешения Рёцке запись: добавился способ сделать любому блоку полупрозрачный фоновый цвет без картинки, который работает во всех современных браузерах и IE5.5-8. Полупрозрачный фон — Способ I.

 Walterkaубрала-не помогло(

[Walterka]

macca, перечитайте первый пункт в заглавном посте. bokonist изменил его и добавил более простой способ.

Walterka не, я вот что не то делала-поняла-имя элемента не то прописывала
теперь все ок) спасибо!

[Досточтимая Фрау]

Сделал себе дизайн по инструкции (способ 2). Во всех браузерах выглядит так, как задумывалось:


Но в ИЭ 8 прозрачность в разы меньше и какой-то ужас творится со шрифтами:


Понимаю, что все говорят про глючность ИЭ, но возможно ли исправить такой «эффект» (для душевного спокойствия)?

Пробовал первым способом — в ИЭ и Опере прозрачность работала нормально (в ИЭ снова искажался шрифт), но в других браузерах (ФФ, Сафари) отображался только полупрозрачный wrapper, а в блоках фон вообще исчезал. Что я не так делаю?

Фрагмент кода:
.left #wrapper { background: url('/userdir/1/6/0/6/160675/54137606.png') repeat bottom right !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/6/0/6/160675/54137606.png', sizingMethod='scale'); }
.left #wrapper a, .left #wrapper input { position:relative; z-index: 2; }

div.bordered { background: url('/userdir/1/6/0/6/160675/54137606.png') repeat bottom right !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/6/0/6/160675/54137606.png', sizingMethod='scale'); }
div.bordered a, div.bordered input { position:relative; z-index: 2; }

[Walterka]

Junger Lord, попробуйте способ с прозрачностью цвета, который предложил  bokonist/

[Досточтимая Фрау]

Walterka, вы про способ № 1? Так я же написал, что его тоже пробовал: прозрачность нормальная, но в ИЭ со шрифтами такая же история. Вот и хотелось бы узнать, возможно ли вообще в ИЭ избавиться от уничтожения сглаживания шрифтов? В принципе, я ИЭ не пользуюсь, но для личного спокойствия бы хотелось, чтобы у всех читателей одинаково красиво отображалось))

[Walterka]

Junger Lord, в настройках браузера отключить функцию "сглаживание шрифта" или что-то вроде того (не помню, как точно называлось), это не от дизайна зависит.

[Досточтимая Фрау]

Walterka, у меня она отключена (попробовал включить — никаких изменений). И, к тому же, на прошлом дизайне такого не наблюдалось. Шрифт стал тонким только после установки полупрозрачного фона.

[bokonist]

Junger Lord, сейчас у вас стоит rgba(183, 181, 200, .5) и filter:gradient #88b7b5c8 — 0x88 больше чем 50%, поэтому светлее, должно быть 0x80.

в вашем случае можно обойтись без прозрачности — сделайте три картинки разной яркости, задайте каждому блоку свою картинку в режиме fixed с позиционированием 50% 0 — они будут позиционироваться относительно body и совпадать на стыках.