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

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

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

Голосую за вынесение ссылки на этот пост в эпиграф БОЛЬШИМИ БУКВАМИ.

Не хочется больше "прозрачные вопросы" в ф-ленте видеть...

[Tex]

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

С одобрения дргугих админов сообщества конечно.

[mnatsakanian]

вот у меня такой код :

.postLinksBackg a:link{text-decoration: none; border-bottom: dotted; border-width: 2px; border-bottom-color: rgb(42,86,126);}

.postLinksBackg a:visited{text-decoration: none; border-bottom: dotted; border-width: 2px; border-bottom-color: rgb(42,86,126);}

.postLinksBackg a:active{text-decoration: none; border-bottom: dotted; border-width: 2px; border-bottom-color: rgb(42,86,126);}

body.left{padding-left:10px !important;}

.left #wrapper{width:790px;margin: 0 0 0 -395px !important;padding:0 !important;position:relative;left:50%;//left:49.5%;}

.left #side{width:180px !important;margin:0 !important;}

.left #page-c{width:600px !important;padding:0 !important;}

a:hover {font-style: bold; font-weight: bold;}

body{background-attachment:fixed;}

div.bordered {background: repeat bottom right !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/9/3/5/5/93557/18275211.png', sizingMethod='scale');}



но у меня однако этого фона нет... вообще не видно.

нужна такая темно серая пелена на синем фоне.. фон записи, меню и пр..

сможете помочь?

[Dark]

Рёцке ну ты монстр*))



в эпиграф!!

[[vilka]]

Рёцке Браво! Это вам нужна нобелевская премия за догадливость. Я именно это и имела в виду. Я всетки наверно не правильно излагала,и слишком умные не поняли мой тупой текст



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



Полупрозрачность делается сложнее, но не сильно.

Вот так:

*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;}

ну всетки СПАСИБО

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

mnatsakanian научитесь читать инструкцию )

"кладем себе в Библиотеку изображения."

картинку надо брать из своей и только своей БИ

сейчас допишу в пост жирными буквами )

[mnatsakanian]

Рёцке

я так и делала, собственно

читать умею и нежирные буквы

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

mnatsakanian но факт остается фактом

дайрь порезал вашу картинку

цитата "background: repeat bottom right !important;"

а значит вы ее как-то не так вставляли )

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

Tex все методы тестировались в IE6,Opera 9, FF 1.5

за IE7, Opera 8 и ниже, FF 2.0 не ручаюсь, но в FF2 и IE7, говорили, работает )

[mnatsakanian]

Рёцке

аа.. может размер большой?

в предыдущей записи не было метки о 10х10 px у меня побольше картинка

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

mnatsakanian нет - не в размере дело. главное - чтобы ссылка была ваша. если картинка ваша - дайри не режет url(...)



вот так не работает?



div.bordered {background: url('/userdir/9/3/5/5/93557/18275211.png') 0 0 repeat !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/9/3/5/5/93557/18275211.png', sizingMethod='scale');}



и вы забыли про код из третьего пункта.

[Паровозичек]

Рёцке большое спасибо!!!

у Вас очень неплохо получается писать FAQи... =) Буду ждать с нетерпением исчо, если назреете...

[Салемка]

Я сделала полупрозрачность. Но возник маленький вопрпос, как сделат ьтак, чтобы буквы картинки и т.д. нормально выделялись как обычно?(



А за коды и вс етакое огромное спс)

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

Салемка Поясните. Я посмотрел ваш дневник и не понял, что вы имели ввиду.

[Салемка]

Рёцке я просто только что код убрала. Я в том смысле, что код делать ВСЕ полупрозрачным. а нельзя сделать так, чтобы все, кроме фона записи и меню, было нормальным?

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

Салемка А вы пост читали?

[Салемка]

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

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

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

Картинку сами создадите?

Вот вам код, только поменяйте по аналогии ссылку на ссылку на свою картинку (в двух местах)



div.bordered

{

background: url('/userdir/9/3/1/2/93120/17332882.png') repeat bottom right !important;

background-image: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/9/3/1/2/93120/17332882.png', sizingMethod='scale');

}

div.bordered a, div.bordered input

{

position:relative; z-index: 2;

}

[Салемка]

Рёцке хорошо, попробую позже)) Спасиба)

[St.Fib]

А у меня полупрозрачный фон первым способом не выходит, получается вообще прозрачный, хотя opasity аж 90 стояла.

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

St.Fib проверьте не режет ли дайри вашу картинку.

и покажите, если не сложно, код

[St.Fib]

Рёцке Да нет, вроде не режет...

Вот полный код:



body.left { padding-left: 10px !important; padding-left: 170px; }

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

.left #side { width:150px; margin-left:-160px !important; margin-left:-80px; margin-right:-150px; }

.right #page-t { margin-right:160px; }

.right #side { width:150px; margin-left:-150px; }

body.left{padding-left:10px !important;}

.left #wrapper{width:945px;margin: 0 0 0 -473px !important;padding:0 !important;position:relative;left:50%;//left:49.5%;}

.left #side{width:170px !important;margin:0 !important;}

.left #page-c{width:750px !important;padding:0 !important;}

.right #wrapper{width:945px;margin: 0 0 0 -473px !important;padding:0 !important;position:relative;left:50%;}

.right #side{width:170px !important;margin:0 !important;float:right}

.right #page-c{width:750px !important;padding:0 !important;}

.right #page-t {margin:0 !important;}

.singlePost, .menuSection{ border-style:dotted; border-width:0 0 2px;}

A:hover {TEXT-DECORATION: none; text-transform: none; border-bottom: dotted; border-width: 2px; border-bottom-color: #FFFF99;}

body{background:#cccccc url('/userdir/7/7/1/5/77151/16670314.jpg') repeat fixed}

.postLinksBackg a:hover{text-decoration: none; border-bottom: dotted; border-width: 1px; border-bottom-color: rgb(237,205,84);}

.postLinks {padding: 1px;}

#myFavLink { background:url("/userdir/7/7/1/5/77151/16687819.gif") no-repeat 0; padding-left: 20px !important; }

#writeThisDiary { background:url('/userdir/7/7/1/5/77151/16713874.gif') no-repeat 0; padding-left: 20px !important; }

#umailLink { background:url('/userdir/7/7/1/5/77151/16713934.gif') no-repeat 0; padding-left: 20px !important; }

#myQuotLink { background:url('/userdir/7/7/1/5/77151/16713798.gif') no-repeat 0; padding-left: 20px !important; }

#discussionLink { background:url('/userdir/7/7/1/5/77151/16713974.gif') no-repeat 0; padding-left: 20px !important; }

#myProfileLink { background:url('/userdir/7/7/1/5/77151/16714030.gif') no-repeat 0; padding-left: 20px !important; }

#optionsLink { background:url('/userdir/7/7/1/5/77151/16714350.gif') no-repeat 0; padding-left: 20px !important; }

#myStatLink { background:url('/userdir/7/7/1/5/77151/16714070.gif') no-repeat 0; padding-left: 20px !important; }

#photolibLink { background:url('/userdir/7/7/1/5/77151/16714074.gif') no-repeat 0; padding-left: 20px !important; }

#upInChart { background:url('/userdir/7/7/1/5/77151/16716334.gif') no-repeat 0; padding-left: 20px !important; }

#albumLink { background:url('/userdir/7/7/1/5/77151/16714270.gif') no-repeat 0; padding-left: 20px !important; }

#mainpageLink { background:url('/userdir/7/7/1/5/77151/16714174.gif') no-repeat 0; padding-left: 20px !important; }

#iAmQuit { background: url('/userdir/7/7/1/5/77151/16714318.gif') no-repeat 0; padding-left: 20px !important; }

.comments {background: url('/userdir/7/7/1/5/77151/16713974.gif') no-repeat; padding:0 0 0 20px !important; display:block; height:18px; }

.subscribe {background: url('/userdir/7/7/1/5/77151/16786531.gif') no-repeat; padding:0 0 0 20px !important; display:block; height:18px; }

.addToQuote {background: url('/userdir/7/7/1/5/77151/16713798.gif') no-repeat; padding:0 0 0 20px !important; display:block; height:18px; }

BODY, HTML { SCROLLBAR-FACE-COLOR: #FFFF66; SCROLLBAR-HIGHLIGHT-COLOR: #99cc33; SCROLLBAR-SHADOW-COLOR: #cccc66; SCROLLBAR-3DLIGHT-COLOR: #99CC66; SCROLLBAR-ARROW-COLOR: #CCFF66; SCROLLBAR-TRACK-COLOR: #FFFF99; SCROLLBAR-DARKSHADOW-COLOR: #66cc66; }

a:hover {color:#99cc99;}

.paragraph div:first-letter { font-size: 30px; float: left !important; float: none; font-family:BirchCTT; margin-right: 3px; color: #99cc33; line-height:100% !important; line-height:140%; }

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

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

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

код надо дополнить выделенной строкой вот так:



#page-t .bordered {background: none;}

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

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



Спасибо, что спросили - дополнил инструкцию )

[St.Fib]

Рёцке Все равно та же фигня, все прозрачное. Ничего не меняется((

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

ох... IE, наверное? у меня в опере нормально.

завтра приду на работу разберусь.



вы вижу код пока убрали...



пока можно попробовать вместо *element* прописать #postsArea или div#postsArea

типа

#postsArea { background:none; background: url('/use... и так далее по тексту..

если нет - тогда завтра.

[St.Fib]

IE, он самый, чтоб его...

попробовала поменять *element*, все равно ничего. Бум ждать завтра) Пока сама попробую сообразить...

[Fandi]

Подскажите как сделать чтобы при наведении мышки на блок фон становился не прозрачным а при отсутствии мышки - полупрозрачным. Вообще по идее это делается onMouseOver и OnMouseOut но я что то не соображу как их в css впихнуть.

[Fandi]

Нашла =)

добавте отсюда пожалуйста

http://pay.diary.ru/~diaryCSS/?comm...postid=26084730



думаю не у меня одной такой вопрос =)

[Книжник.]

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

[Portly Hobbit]

Возникла проблема с полупрозрачным фоном.



После описанных выше инструкций невозможно выделить текст в комментариях, и в целом - в дневнике.



Как правильно написать код, чтобы не было проблем с выделением текста.