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

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

Я удалил картинку 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

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

*подобрал челюсть*

div.bordered { background: repeat bottom right !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/'C:/Documents and Settings/Делькин-стрелкин/Мои документы/Мои рисунки/м.gif, sizingMethod='scale'); }

ЭТО ЧТО!?!?



а вот это делает полупрозрачные блоки:

#page-t .bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); zoom: 1;}



бегом сначала учиться(http://htmlbook.ru) потом вдумчиво читать инструкции.

[bulut]

Snup

клик

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

bulut объясните мне

а) принципиальную разность вашего способа и моего, указанного вторым

б) преимущества способа, работающего на одном браузере, перед кроссбраузерным.



кстати спасибо, я теперь знаю, кому надо отрывать руки за распространиение синтакически неправильных кодов в сообществе



#page-t .bordered{background: url('/userdir/1/0/0/8/100872/19950127.png') repeat bottom right !

любой код написанный после этой дурацкой строчки работать НЕ БУДЕТ, поскольку вы даже скобку не закрыли. Я уже не говорю о таинственном восклицательном знаке в конце строки.



вам даже написали в комментах, что у людей из-за этого кода пробелемы, а вы всё равно его распространяете.

[bulut]

Рёцке

ну я-то код, как вы выразились, хотя бы распространяю..собственно, я пишу что работает у меня.

а вы кроме "всё не правильно, иди учись" ничего не пишите...а нет, пишите, строчке "иди учись" предшевствует страница восклицаний какие все придурки.

собственно и всё)

[bulut]

Рёцке

просмотрела.

строки #page-t .bordered{background: url('/userdir/1/0/0/8/100872/19950127.png') repeat bottom right ! у меня нет и впомине.

как-то криво вы смотрите

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

bulut по вашей ссылке я его увидел, этот код. вы что, сами ее не смотрели? )



по поводу "иди учись"

я не буду повторять то, что написано в инструкции и не буду писать за других код.

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

[bulut]

Рёцке

нет у меня такой строки в окне оформления)))

вы со мной спорить будете?)

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

я же вам русским языком сказал - "по вашей ссылке", которую вы привели вот в этом посте полтора часа назад

http://pay.diary.ru/~diaryCSS/?comm...78490#121654551

[bulut]

Рёцке

смотрите внимательно, от этого кода я давно отказалась и никому его не советую))

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

bulut а что вы, простите, тогда советуете Snup? Пройти по ссылке и ... и что?

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



Кстати неужели это так сложно - пост поправить?

[bulut]

Рёцке

вот подождем человечка и посмотрим, осилит или нет)

не нужно много расписывать и возмущаться - дайте правильный код и вам спасибо скажут)

чем могла, помогла, удаляюсь)

[~Annahita~]

Рёцке

а как убрать непрозрачность полос между постами? не знаю, как объяснить, глянь днев, не очень ведь смотрится((

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

.postLinksBackg {background:transparent !important;}

Annahita

[~Annahita~]

Рёцке

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

[U-lei]

Рёцке а не могли бы вы и мне помочь, у меня теперь тоже не выделяется текст...

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

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

exotic. прозрачности в опере с вашим кодом и не должно быть. сравните ваш код и тот который нужен. внимательно сравните.



а выделяться и не будет. это баг Internet Explorerа шестой версии. кстати уже полгода как 7й вышел.

[U-lei]

Рёцке спасибо) надеюсь теперь верно

[.yeaPy_brunEtte?]

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



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

у меня не идет! хелп!

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

.yeaPy_brunEtte? инструкцию дочитайте.

[.yeaPy_brunEtte?]

Рёцке так картинка вставилась в фон записей и меню) а полупрозрачной не делается) все читала раза 3) внимательно) и се же, что неправильно?

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

.yeaPy_brunEtte? какая еще картинка? у вас же код для полупрозрачности блоков, разве нет?

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

а. вижу. вы код поменяли.



а теперь читайте первый пункт инструкции про полупрозрачный фон:

1. Делаем полупрозрачный PNG в Фотопопе или другом редакторе, кладем себе в Библиотеку изображения.

В фотошопе так: создаем картинку 10 на 10 px c фоном Transparent, берем заливку, устанавливаем opacity в нужное количество процентов и заливаем нужным цветом. Сохранять в PNG (если просит уточнить - PNG-24)

[.yeaPy_brunEtte?]

Рёцке ааааа как все плохо! я в фотошопе таакой ламер по-этому поводу) блиин =(

а сейчас самый гениальный вопрос)))

где в фотошопе найти волшебное слово Transparent?

[St.Fib]

ESD Когда создаешь новый файл (File - New) выбери в Background Contents (цвет фона) Transparent (прозрачный)

и все таки ничего не получается...

фон не полу-прозрачный,а прозрачный...



#side.bordered, #page-t .bordered { background: none; background: url('/userdir/2/1/7/8/217897/21390838.png) repeat bottom right !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/2/1/7/8/217897/21390838.png', sizingMethod='scale'); zoom: 1; }

#side .bordered a, #side .bordered input, textarea { position:relative; z-index: 2; }

#page-t .bordered a, #page-t .bordered input, textarea { position:relative; z-index: 2; }

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

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

аааааааа...

это съело мой моск...

поправила кавычки...проверила картинку...

поставила...

белым мне делает фон...

фон же записи черный и непрозрачный...

[zaqwe]

Код вставила, но вместе с фоном записи и меню, делаются полупрозрачными и картинки и текст.

скрин

Может быть можно сделать фон записи и меню полупрозрачными,а все остальное (текст,фотографии,аватары...) чтобы было обычным? (Фотошопа,чтобы сделать полупрозрачный фон у меня нет.)

Помогите,пожалуйста.

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

zaqwe прочитайте про отличие полупрозрачности и полупрозрачного фона и используйте нужный способ.

никто не говорил что будет легко.

ESD увы в больнице я с мобильника и посмотреть не могу