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

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



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


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

Комментарии
22.04.2007 в 21:20

а как называется блок, где вводится текст комментария?
22.04.2007 в 21:23

BluGirl

#addCommentArea
22.04.2007 в 21:23

Dark Rainfall спасибо!
23.04.2007 в 14:14

Зверь-чародей
Dark Rainfall код в студию )
24.04.2007 в 11:16

Рёцке



body.left { padding-left: 10px !important; padding-left: 300px; background-repeat:no-repeat; background-position: 50% 100%; background-attachment:fixed}

.left #wrapper { margin:0 !important; margin-left:-290px; padding-left:290px; }

.left #side { width:280px; margin-left:-290px !important; margin-left:-145px; margin-right:-280px; }

.left #page-c {background: none;background: url('/userdir/4/6/3/4/46348/18625434.png') !important; repeat bottom right !important;background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/userdir/4/6/3/4/46348/17576406.png', sizingMethod='scale'); font-size:90%}

#page-c A, #page-c input { position:relative; z-index: 2;}

#globalLinks {display:none}

#thisDiaryInfo {background: url('/userdir/4/6/3/4/46348/15919354.jpg')}

#commentsArea .postContent{background: #D0BD98 !important; border: 1px solid #C7E3F0; padding:0px 0px 0px 130px !important;}

#commentsArea{background-image: url('/userdir/4/6/3/4/46348/15931394.jpg');padding:0px 0px 0px 0px !important; }

.menuSection {background-image: url('/userdir/4/6/3/4/46348/17579226.png')}

.menuSection.lastSection{background-image:url('/userdir/4/6/3/4/46348/15879562.jpg');background-repeat: no-repeat;}

#lastComments ul li a{color:#ffffff}

#lastComments ul li a:hover{color:#000000; text-decoration:none;}

#lastComments ul li {color:#ffffff}

.postLinksBackg {background-image:url('/userdir/4/6/3/4/46348/15917798.jpg');!important;display:block !important; background:#border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd; margin-top: 10px !important; padding:10px 0 !important;}

.postLinksBackg a:link {color:#ffffff;}

; a:hover {color:#ffffff}

; a:visited {color:#ffffff}

#addCommentArea { padding-bottom:0;background-image:url('/userdir/4/6/3/4/46348/15919354.jpg')}

#addCommentArea a:link {color:#ffffff; position:relative; z-index: 2;}

; a:hover {color:#ffffff}

; a:visited {color:#00ff00}

.authorName { float:none;}

24.04.2007 в 14:06

Зверь-чародей
а что вот это за хрень, если не секрет?

; a:hover {color:#ffffff}

; a:visited {color:#ffffff}



исправлять пробуем такими способами:



.left #page-c div {zoom:1;}



.left #page-c div {z-index:2;}



.left #page-c div {position:relative;}



или комбинациями из них



получиться - отпишитесь

не получиться - откройте дайрь я в онлайне поэкспериментирую.
24.04.2007 в 14:26

Рёцке

увы, пока ничего не получилось с кодом.

с ним съезжается в правую сторону текст постов и комментариев.



я открыл вам дневник.

огромное спасибо за помощь.







24.04.2007 в 19:27

вдогонку к комменту:

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

те, кто не решается сменить 6 эксплорер - это их проблемы, а не мои :)





24.04.2007 в 19:33

Зверь-чародей
Dark Rainfall прозрачность для шестого IE лучше сделать вторым указанным в статье способом.

ЗЫ всё равно закрыто.
24.04.2007 в 19:46

Зверь-чародей
Кстати вот так у меня работает

#page-c div {position:relative; z-index: 2;}

#page-c div div{ position: normal;}

27.04.2007 в 07:55

Love the enemy, my love is thee enemy. They say they don't want fame, but they get famous when we fcuk
я извеняюсь, что опять поднимаю эту тему...но я делала полупрозрачность в опере и все нормально смотрелось. но когда я заглянула через эксплорер - просто ужаснулась. прозрачности нет, ссылки исчезли а когда захожу в избранные ни видно не одной записи. что можно сделать? я пыталась почитать тут и понять, но гм...что-то у меня не очень получилось)
27.04.2007 в 12:46

Зверь-чародей
Your Sickness дневник закрыт -> не помогу.

что за дурацкая привычка просить о помощи и не показывать ЧТО ИМЕННО не работает. Я не дайри админ - как я должен увидеть код?
27.04.2007 в 21:25

Love the enemy, my love is thee enemy. They say they don't want fame, but they get famous when we fcuk
Рёцке как-нибудь)) use your magic)



вот. открыла.
06.05.2007 в 19:38

Т_Т

Пишу

#side .menuSection { background: none; background: url('/userdir/4/0/4/4/404484/19025822.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/4/0/4/4/404484/19025822.png', sizingMethod='scale'); }

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

и всё ОК.

тупо заменяю #side .menuSection на #page-t .bordered и ничего не выходит. За что? :weep3:
07.05.2007 в 02:08

а как шрифт поменять?

я сделала полупрозрачное меню

у меня был шрифт - Arial

сейчас другое



поможете? )



заранее спасибо
08.05.2007 в 01:26

Shackleford, Rusty Shackleford
3. Для элементов, которым прописали полупрозрачноть, прописывам новое свойство ссылок(не потеряйте a и input!):

ЭТО ОФИГЕННО ВАЖНЫЙ ПУНКТ! Забудете - не будут работать ссылки в Internet Explorer

*element* a, *element* input

{

position:relative; z-index: 2;

}




Вот про это не поняла. Значит, фон записей сделала картинкой полупрозрачной, добавила вот так:

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

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


ИЭ ничего не кажет. :bat2:
08.05.2007 в 09:53

Зверь-чародей
Эраэти Масаёши

1. #page-t div.bordered

2. и дописать к полупрозрачности

.....sizingMethod='scale'); zoom:1;}
09.05.2007 в 18:13

Рёцке Спасибо вам большое)):white:
19.05.2007 в 22:05

правды нет, есть мнения
спасибо огроменное!

правда после всех коррекций днев стал страшно тормозить)
19.05.2007 в 23:53

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

а как вы видите  bulut?
20.05.2007 в 00:20

Зверь-чародей
Наверное это оттого, что вы не читали мануал вдумчиво.

Прочитайте отличие ПОЛУПРОЗРАЧНОСТИ и ПОЛУПРОЗРАЧНОГО ФОНА и выполните НУЖНЫЕ инструкции )
20.05.2007 в 01:31

правды нет, есть мнения
Рёцке

я очень вдумчиво читала) и перечитывала)

код прописала такой:

#side .bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=96);zoom:0;} - полупрозрачность меню

#page-t .bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=96);zoom:0;} - полупрозрачность блока текста



из эксплорера видят вот такое:



а барышня из Файрфокса видит вот такое:



подозреваю, что Опера видит так же прозрачно)



что же делать? в чем ошибка?
20.05.2007 в 02:46

правды нет, есть мнения
вроде поняла)

прошу подтверждения - видно текст на страничке или он тоже пролупрозрачный как и фон?)

код вставила такой:

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

Зверь-чародей
bulut

1.

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

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



этот код делает полупрозрачность ВСЕГО блока. вместе с текстом.

причем в IE на 4% а в Опере и Фоксе на 55% (сами вглядитеть - зачем у вас там разные значения?)

и почему zoom:0?



2.

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

чего-то тут не хватает.
20.05.2007 в 13:10

правды нет, есть мнения
Рёцке

а кто ж его знает зачем)) как нашла, так и написала)

а код:

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

работает)))

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

у меня же всё отлично видно
20.05.2007 в 13:36

Зверь-чародей
*вшоке*

как он работает если он синтаксически НЕВЕРЕН?

вы где его взяли вообще?
20.05.2007 в 14:10

правды нет, есть мнения
Рёцке

где - не помню. где-то на этом дневе.

а как правильно? у меня работает :D
20.05.2007 в 14:43

Зверь-чародей
bulut не знаю как оно у вас работает

но у меня не работает ни полупрозрачный фон, ни картинка комментариев.



эй! вы ВООБЩЕ мануал видите?

что там написано а что у вас?



если пишите не по мануалу, не жалуйтесь что не работает, не жалуйтесь что не работают ДРУГИЕ коды из-за синтаксических ошибок и не удивляейтесь вопросам ваших ПЧ о глюках.



я не буду коментировать ваши фантазии. делайте по мануалу, тогда поговорим.

20.05.2007 в 15:11

правды нет, есть мнения
Рёцке спасибо, сама разберусь)
30.05.2007 в 21:00

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

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

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