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

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



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


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

Комментарии
06.08.2007 в 15:18

Рёцке у меня A {position.. вообще не прописано. только
#page-t div.bordered { background: none; background: url('/userdir/9/5/9/3/95937/22962703.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/9/5/9/3/95937/22962703.png', sizingMethod='scale'); zoom: 1; }
#page-t div.bordered a, #page-t div.bordered, textarea { position:relative; z-index: 2; }

06.08.2007 в 15:24

Зверь-чародей
чего?. как это не прописано
а это
#page-t div.bordered a, #page-t div.bordered, textarea { position:relative; z-index: 2; }
что?

и для меню прописано:
#side .bordered a, #side .bordered input, textarea { position:relative; z-index: 2; }
06.08.2007 в 15:46

ой простите, правдо не заметила :shy:

а это LI A куда пиать нужно?
#page-t div.bordered li a, #page-t div.bordered, textarea { position:relative; z-index: 2; } ?
и..для себя чтобы знать "А" - это ссылки, да? или я что-то путаю?

06.08.2007 в 16:17

Зверь-чародей
чего?.
A - ссылки
LI - пункт списка
LI A - ссылки внутри элемента списка )
06.08.2007 в 16:19

Зверь-чародей
#page-t div.bordered li a

А вот это например означает, что на основной странице(#page-t) есть блоки постов(div.bordered) на которых есть списки с пунктами(LI) в которых есть ссылки(A)

а "подписаться" и есть ссылка в элементе списка.

06.08.2007 в 16:31

ну тогда получается, что
page-t div.bordered li a, #page-t div.bordered, textarea { position:relative; z-index: 2; }
должно работать?
или все не так просто?)
06.08.2007 в 16:42

Зверь-чародей
#page-t div.bordered a,#page-t div.bordered li a, #page-t div.bordered, textarea { position:relative; z-index: 2; }

а ели не будет, то наверное надо непосредственно ссылкам, которые не работают прописать то же самое.
06.08.2007 в 16:59

Рёцке неа, не работает.
а отдельно Комментарии Подписаться и Цитатник это с помощью
#comments , #subscribe и #addToQuote lastLink ?
а вообще спасибо большое за помощь)
12.08.2007 в 06:11

rude and not ginger

Я удалил картинку http: //static.diary.ru/userdir/9/3/1/2/93120/17332882.png из своей БИ
а как теперь делать полупрозрачный без такой картинки? :confused:
12.08.2007 в 09:47

Зверь-чародей
Реми. читать инструкцию
19.08.2007 в 17:23

Что у пьяной женщины на уме, то у пьяного мужчины никогда не получится!
эм...насчет закрпления ников. я ник закрепила, но т.к. у меня идем центрирование всего, что только возможно, то они посередке болтаются...можно как-нибудь прикрепить их к левому краю?)
08.09.2007 в 23:55

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

Тепер, спи до завтра, Спробуєм може, ще
как отменить полупрозрачность поля ввода для новой записи?

извеняюсь, что не совсем в тему.
19.09.2007 в 03:31

Окружающие видят только мои маски и думают, что знают меня....
ставлю полупрозрачность самого блока с текстом, и все содержимое становится тож полупрозрачным (картинки, цвет текста тускнеет...)
Это можно как-то исправить?
19.09.2007 в 06:39

Тепер, спи до завтра, Спробуєм може, ще
ставлю полупрозрачность самого блока с текстом, и все содержимое становится тож полупрозрачным (картинки, цвет текста тускнеет...)
Полупрозрачность - вот это когда полупрозрачно все - фон, текст и картинки.
Полупрозрачный фон - это когда фон, не поверите, полупрозрачный )
Это можно как-то исправить?
да. не путать полупрозрачность и полупрозрачный фон. в инструкции расписанно.
23.10.2007 в 12:57

Противную сторону нужно выслушать, как бы она ни была противна
Рёцке, спс большое за подробную инструкцию) Даже я сообразила)) но, почему-то, у меня перестал правильно работать тэг more)

Код теперешний (он же был до того, как попробовала ввести новый):

body { background-attachment:fixed; }
#side .bordered {border: none;}
#side .menuSection {border: 3px double #336633;}
#page-c .countFirstDate,.countSecondDate {border: 3px double #336633;}
#page-c .bordered {border: none;}
#page-c .singlePost {border: none;}
#page-c .singlePost { background: none; border: 3px double #336633;}
#side {-moz-opacity:.60 !important;opacity:.60 !important; filter:alpha(opacity=60);}
#page-t .bordered {-moz-opacity:.60 !important;opacity:.60 !important; filter:alpha(opacity=60);}

Пыталась ввести такой:
body { background-attachment:fixed; }
#side .bordered {border: none;}
#side .menuSection {border: 3px double #336633;}
#page-c .countFirstDate,.countSecondDate {border: 3px double #336633;}
#page-c .bordered {border: none;}
#page-c .singlePost {border: none;}
#page-c .singlePost { background: none; border: 3px double #336633;}

#side, #page-c
{
background: none;
background: url('/userdir/8/1/6/4/81646/24083094.png') repeat bottom right !important;
background-image: none;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/8/1/6/4/81646/24083094.png', sizingMethod='scale');
zoom: 1;
}

.paragraph
{
background: none;
background: url('/userdir/8/1/6/4/81646/24083230.png') repeat bottom right !important;
background-image: none;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/8/1/6/4/81646/24083230.png', sizingMethod='scale');
zoom: 1;
}

Моря стали местами пропадать (то есть, жмешь на "читать дальше", и иногда открывается пустое место, текста нет, а иногда - все нормально).

У меня Мозилла Файрфокс 2.0.0.8

Прописала новые свойства ссылок для указанных элементов - та же картина. Затерла все нафик) Но хочется узнать, в чем моя ошибка) Заранее спасибо)
08.11.2007 в 12:18

.принцессы не пукают!
ребята, у меня при прозрачности начинает тормозить прокрутка дневника. с чем это связано и как устранять?
08.11.2007 в 16:36

Тепер, спи до завтра, Спробуєм може, ще
.гиена, ну а сам(а) как считаешь?) ..убрать прозрачность или модернизировать компьютер.
11.11.2007 в 01:28

Клиа.
очень хороший мануал.
Если этого мало - прозрачность можно форсировать так:
*element* {background: transparent;}

лучше так:
*element* {background: inherit;}

кстати opacity будет единственным правильным свойством css3. его уже сейчас подхватывает опера и фф.


12.11.2007 в 02:44

Ты делаешь будущее каждую секунду- помни об этом!
ох, комментарии просто жгут:) Искренне сочувствую Рёцке.

Спасибо за пост!
18.11.2007 в 13:49

не отделаться только от чувства, что головой насквозь я пробью потолок, если вдруг оттолкнусь и взлечу и это изматывает меня. все время
Большое спасибо
25.11.2007 в 14:59

"умереть или быть убитым - это закон жизни. это лучше, чем жить без цели"(с)Киба
у меня в комментариях ники комментирующих сбиваются в кучу в углу. если исправляю это кодом
textarea
{
position:relative; z-index: 2;
}
то ники появляются, но перестают работать ссылки.
помогите, пожалуйста))
25.11.2007 в 18:26

Что у пьяной женщины на уме, то у пьяного мужчины никогда не получится!
у меня похожая проблема. из-за ксс в дайре не работаю видео, музыка, ники иногда улетают и всякий раз, когда ставлю ссылку, то пишет, что ошибка - надо закрыть ИЕ... и также если фотка, например, больше положенного размера по ширине и высоте и закрыта под морем, то это все...
02.12.2007 в 15:40

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


привожу в пример картинку, потому что дайры в код смайлы впихивают в посте.
когда я его вставляю, в опере и мозиле фон записей и меню становится прозрачным, вместо полупрозрачного. в эксплорере оно как положенно полупрозрачное, но в меню ни одна ссылка не работает. можно как-то это исправить?
07.12.2007 в 13:55

Same As It Never Was
Делаю, как вы учите, но ничего не выходит. Вообще не совершается никакких изменений.

#page-t.bordered{ background: none; background: url('/userdir/1/4/8/8/148850/25569062.png') repeat bottom right !important; background-image: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/4/8/8/148850/25569062.png', sizingMethod='scale'); zoom: 1; }
#page-t.bordered a, #page-t.bordered input, textarea { .position:relative; z-index: 2; }

????
07.12.2007 в 14:21

Что у пьяной женщины на уме, то у пьяного мужчины никогда не получится!
ещё в настройках оформления нужно в графе "фон записи" все убрать)
07.12.2007 в 15:03

Same As It Never Was
ой, точно..
но тогда идёт полная прозрачность..
07.12.2007 в 19:37

Что у пьяной женщины на уме, то у пьяного мужчины никогда не получится!
попробуй тогда так:
#page-t.bordered { background: none; background: url('/userdir/1/4/8/8/148850/25569062.png') repeat bottom right !important; background-image: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/4/8/8/148850/25569062.png', sizingMethod='scale'); zoom: 1; }
#page-t.bordered a, #page-t.bordered input, textarea { .position:relative; z-index: 2; }

между бордерд и { бэкграунд я поставила пробел. вообще часто такое... пробуй ставить и убирать пробелы между текстом и скобочками, помогает) например, ещё можно изменить zoom: 1; } на zoom: 1;}
07.12.2007 в 20:01

Same As It Never Was
и всё равно полная прозравчность.. бред какой-то. может это мой комп или опера...(?)
07.12.2007 в 21:06

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