Зверь-чародей
Я удалил картинку 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); }

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



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


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

Комментарии
09.07.2007 в 15:19

Чайники приехали (:
#page-t .bordered {background: none;}

#page-t .bordered { background: url('/userdir/1/9/2/6/19264/21412622.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/9/2/6/19264/21412622.png', sizingMethod='scale'); }

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



А в ИЕ всё равно не работает прозрачность. в Опере всё ог.

В чём беда?..)
09.07.2007 в 15:30

Зверь-чародей
oice. код полностью напишите.

zoom: 1; забыли
09.07.2007 в 15:34

Чайники приехали (:
Точно.Благодарю.!).
09.07.2007 в 15:49

Чайники приехали (:
А сейчас У меня, когда пишу новый пост или редактиирую старый,в окне ничего не печатается. текст как есть, так его и не ищменить. МОжно тольо выделять.

Это может быть погрешностью преобразований? И что делать?



+ ники пользователей, которые оставляют комменты смещены чуть ли не до центра экрана. что это всё?!...
09.07.2007 в 16:04

Зверь-чародей
oice. снова забилы

в этот раз про

textarea

{

position:relative; z-index: 2;

}



кстати для IE гораздо лучше, хоть и сложнее, второй способ.
09.07.2007 в 16:22

Чайники приехали (:
В ИЕ всё отл. а Опере - не работает. Ничё не вписывается).



А второй вариант же не работает на фиксированном фоне. Так что лучше этот доработать).
09.07.2007 в 16:38

Зверь-чародей
oice. кстати если вы пользуетесь кодом для дизайна фиксированной ширины от Tex то до конца вы код не выправите.

про ники написано в инструкции.

в опере должно работать - гдегде а там полупрозрачный фон обычно проблем не вызывает. проблема может быть в остальном коде
09.07.2007 в 16:47

Чайники приехали (:
С никами всё стало нормально после

textarea

{

position:relative; z-index: 2;

}



А Опера лагает.

Да, фиксация взята у Теха.



Попробую ещё поковырять. Спасибо большое ещё раз.
09.07.2007 в 16:47

Чайники приехали (:
С никами всё стало нормально после

textarea

{

position:relative; z-index: 2;

}



А Опера лагает.

Да, фиксация взята у Теха.



Попробую ещё поковырять. Спасибо большое ещё раз.
26.07.2007 в 22:01

Хм. вопрос )) у меня все вышло замечательно, но теперь страница очень медленно прокручивается вверх/вниз. Можно как то избавится от этого косяка? возможно про это уже писали, но мои мозгики изъедены изучением CSS, поетому сорки )) искать уже нет сил
27.07.2007 в 12:27

Зверь-чародей
gygyli нет. тормоза зависят от компа.
решением тут будет не использовать полупрозрачность для _больших_ блоков типа #wrapper или #page-c
27.07.2007 в 15:20

Рёцке спс я уже это поняла, ибо глучит только в опере (на дневах я работаю в ней) а в мазиле все супер ))) но все равно спс )))
28.07.2007 в 14:29

Ahh, look at all the lonely people
делала полупрозрачный фон по вашим наставлениям. вставила картинку в БИ и т.д. и т.п. но код не работает. фон исчезает вообще. помогите пожалуйста. мой код:

#page-t .bordered{background: none; background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/, sizingMethod='scale'); zoom: 1; }
28.07.2007 в 14:32

Зверь-чародей
девочка=дурочка смотрите что у вас в коде написано:

#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/, sizingMethod='scale'); zoom: 1; }

вы скобку после имени файла закройте, когда код вставляете.
и, кстати, не забудьте про остальные пункты инструкции
28.07.2007 в 14:38

Ahh, look at all the lonely people
все равно не выходит... умоляю помогите... я уже два часа сижу и пытаюсь сделать... мозги уже расплавились...
28.07.2007 в 15:00

Зверь-чародей
скопируйте _мой_ код заново, аккуратно замените названия файлов не удаляя кавычек, вставте сюда то, что собираетесь вставлять в дневник, втавьте в дневник и напишите сюда код, который вставился (после обновления странички настроек)
28.07.2007 в 15:07

Ahh, look at all the lonely people
до:
#page-t .bordered {
background: none;
background: url('/userdir/2/9/7/4/297497/22654663.png') repeat bottom right !important;
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/2/9/7/4/297497/22654663.png', sizingMethod='scale');
zoom: 1;
}

после:
#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654387.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/), sizingMethod='scale'); zoom: 1; }


28.07.2007 в 15:33

Зверь-чародей
гм...
попробуйте в обоих местах вставлять в виде
/userdir/2/9/7/4/297497/22654663.png
28.07.2007 в 15:38

Ahh, look at all the lonely people
я сделала так:
#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654663.png') repeat bottom right !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/), sizingMethod='scale'); zoom: 1; }

и ничего
28.07.2007 в 15:45

Зверь-чародей
девочка=дурочка я имел ввиду без //static.diary.ru/
28.07.2007 в 15:52

Ahh, look at all the lonely people
#page-t .bordered{background: url('/userdir/2/9/7/4/297497/22654663.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/userdir/2/9/7/4/297497/22654663.png'), sizingMethod='scale'); zoom: 1; }

- все вообще чудным образом испарилось.

28.07.2007 в 15:59

Ahh, look at all the lonely people
сделала то же самое с главным меню и все получилось, а вот с основным блоком произошло нечто странное...
28.07.2007 в 16:05

Зверь-чародей
девочка=дурочка уберите цвета записей из настроек оформления
28.07.2007 в 16:08

Ahh, look at all the lonely people
фон записи становится прозрачным...
28.07.2007 в 19:57

You're my new Achilles heel
люди, у меня вопрос. у меня полупрозрачный фон зеленоватого цвета. как сделать его голубоватым?.. в кодах мало что шарю, вот все мои:
div.menuSection, div.pageBar, #epigraph, .postInner, .calnd A:hover { TEXT-DECORATION: none; text-transform: none; border-bottom: dotted; border-width:1px; border-bottom-color: #ffffff;}
body{filter:alpha(opacity=80);-moz-opacity:0.80;-khtml-opacity:0.80;opacity:0.80;}
.left #wrapper{width:700px;margin: 0 0 0 -435px !important;padding:0 !important;position:relative;left:50%;//left:49.5%;}
.left #side{width:190px !important;margin:0 !important;}
.left #page-c{width:670px !important;padding:0 !important;}
ul {text-align: center; }
.bordered { border-style:dashed; }
.bordered { border-width:1px; border-style:dashed; }
.singlePost{ background: #000000; border-width:1px; border-color:#ffffff; border-style:dotted; padding:7px;}

04.08.2007 в 20:38

... чтобы потом не было мучительно больно за бесцельно прожитую боль
Рёцке: подскажи, делаю полупрозрачный фон блоков записей и меню - в опере всё окей, в ие фон полностью прозрачен.
ничего не помогает...
код:
#page-t .bordered { background: none; background: url('/userdir/5/0/8/9/508969/22181730.png') repeat bottom right !important; background-image: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/5/0/8/9/508969/22181730.png', sizingMethod='scale'); zoom: 1; }
#page-t .bordered a, page-t .bordered input, textarea { position:relative; z-index: 2; }
#side .bordered { background: none; background: url('/userdir/5/0/8/9/508969/22181730.png') repeat bottom right !important; background-image: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/5/0/8/9/508969/22180750.png', sizingMethod='scale'); zoom: 1; }
#side .bordered a, side .bordered input, textarea { position:relative; z-index: 2; }
04.08.2007 в 21:24

Зверь-чародей
ku_liss такое может быть если в ИЕ отключено активное содержимое. Попросите еще кого-нибудь посмотреть на их компе.
04.08.2007 в 21:45

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

:-(
06.08.2007 в 15:10

а почему перестают работать ссылки Комментарии и Подписаться?
06.08.2007 в 15:14

Зверь-чародей
чего?. возможно для меню стоит прописать не только
... A {position..
а еще и
...LI A {position...