Прочитайте, как обстоят дела у сайта Дневников и как вы можете помочь!
×
21:35 

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

Зверь-чародей
Я удалил картинку 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:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/9/3/1/2/93120/17332882.png', sizingMethod='scale');
zoom: 1;
}

Ссылка должна быть на СВОЮ картинку - ту, которую вы положили в БИ.
Она будет выглядеть приблизительно так: http: //static.diary.ru/userdir/9/3/1/2/93120/17332882.png
Посмотрите на код, посмотрите на вашу ссылку и вставьте по аналогии )


3. Для элементов, которым прописали полупрозрачноть, прописывам новое свойство ссылок
(не потеряйте a и input!):
ЭТО ОФИГЕННО ВАЖНЫЙ ПУНКТ! Забудете - не будут работать ссылки в 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); }

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



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

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

Комментарии
2007-12-07 в 21:26 

Same As It Never Was

2007-12-08 в 17:01 

Sorry I broke the internet with my butt (с) Phil Lester
Ставлю такой код для прозрачности контейнера #wrapper:

#wrapper { width:700px; padding-left 20px; background: none; background: url('/userdir/9/5/4/3/95431/25320746.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='//static.diary.ru/userdir/9/5/4/3/95431/25320746.png', sizingMethod='scale'); zoom: 1; }
#wrapper a, #wrapper input, textarea { position:relative; z-index: 2; }

=================================
Но у меня не действуют в таком случае ни ссылки, ни кнопки. Да и текст не выделяется для того, чтобы вставить цитату.
Скажите пожалуйста, ЧТО я неправильно делаю?
===============================

Могу, если это необходимо, показать ВЕСЬ код пользовательского стиля.
Вот он:
body {background-image:url('/userdir/9/5/4/3/95431/25317978.jpg'); background-attachment:fixed; margin-top:0px !important; }
body.left{padding-left:10px !important;}
.left #wrapper{width:700px;margin: 0 0 0 -455px !important;padding:0 !important;position:relative;left:50%;//left:49.5%;}
.left #side{width:150px !important;margin:0 !important;}
.left #page-c{width:700px !important;padding:0 !important;}
.right #wrapper{width:700px;margin: 0 0 0 -455px !important;padding:0 !important;position:relative;left:50%;}
.right #side{width:150px !important;margin:0 !important;float:right}
.right #page-c{width:700px !important;padding:0 !important;}
.right #page-t {margin:0 !important;}
body a, body input, textarea { position:relative; z-index: 2; }
#wrapper { width:700px; padding-left 20px; background: none; background: url('/userdir/9/5/4/3/95431/25320746.png') repeat bottom right !important;

background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/9/5/4/3/95431/25320746.png',

sizingMethod='scale'); zoom: 1; }
#wrapper a, #wrapper input, textarea { position:relative; z-index: 2; }

#photolibLink {content:'БИ'; }
#upInChart, #headlineList, #myCommunitiesLink, #diarySpiritLink, #diarySupportLink, #diarySupportLink, #faqLink, #myProfileLink, #myStatLink, #myQuotLink, #allDiaryLink, #paySupportLink, #communityCatalogueLink {display:none}
.avatar, .avatarNew { float:left; background: no-repeat bottom right !important; background: no-repeat bottom right; margin: 10px 0 0px 10px !important; margin: 10px 0 0px 5px; padding-left:5px; }
.avatar img,.avatarNew img { display: block; position: relative; background-color: #dbe1e6; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; FILTER: progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=150, Strength=4); }
.singleComment .postInner { margin-left:-150px; padding-left:150px; z-index: 3;}
.commentAuthor .name { margin:0px 0 10px; width:130px; max-width:130px; }
.authorName { float:none ; margin-bottom: 20px; }
.commentAuthor .avatar, .commentAuthor .avatarNew {margin-top: 0px; margin:0px 0 2px; width:0auto !important; max-width:140px !important; width:140px; max-width:140px; }
.singleComment .commentAuthor { float:left; width:130px; overflow:visible; margin-left:-140px !important; margin-left:-65px; max-width:130px; }
.singleComment .postContent { padding-left:128px; }
.sign {background-color: #; margin-left: 10px; }
#authorName {font-weight: bold; }
.singlePost {background: url('/userdir/9/5/4/3/95431/26961813.jpg') no-repeat; background-position:bottom; !important; }
#extratop {border-width:1px; border-style:solid; border-color:#ffff00; position:fixed !important; margin-top:0px !important; margin-left:0px !important; left:0px !important; top:0px !important; background-image:url('/userdir/9/5/4/3/95431/26994245.jpg') !important; background-repeat:no-repeat !important; background-color: #dbe1e6; width:99,9%; height:80px; line-height:0% !important; background-position:center; }
====
Если делаю прозрачность блоков #side и #page-t, всё работает нормально, но мне хочется сделать прозрачным имменно ОБЩИЙ контейнер #wrapper
=====
Помогите, пожалуйста!!!

2007-12-15 в 01:19 

Рёцке, ты гениальный! пост офогительный!
но у меня возникло маленькое затруднение. я сделала полупрозрачность на все, кроме фона днева (экстратоп, менюшку, блок, короче все) сначала написала просто:
#wrapper {-moz-opacity:.85 !important;opacity:.85 !important; filter:alpha(opacity=85); zoom: 1;}
все сработало, но днев стал жутко тормозить!
я переделала вот так:
#side {-moz-opacity:.85 !important;opacity:.85 !important; filter:alpha(opacity=85); zoom: 1;}
#page-c {-moz-opacity:.85 !important;opacity:.85 !important; filter:alpha(opacity=85); zoom: 1;}
#extratop {-moz-opacity:.85 !important;opacity:.85 !important; filter:alpha(opacity=85); zoom: 1;}

тоже все отлично, менюшка тормозить перестала и прокрутка днева заммечательная, но в блоке записей все равно очтались глюки (тормозят смайлы, курсор при наведении на ссылку, и т.п...)
я перечитала и перепробывала все по 100 раз!!! честно! но никаких улучшений =(
у меня IE7. в опере смотрела, тоже самое. очень прошу помощи!

2007-12-15 в 04:56 

"умереть или быть убитым - это закон жизни. это лучше, чем жить без цели"(с)Киба
почему нельзя копировать текст? он упорно не жеалает выделятся! =/

2007-12-15 в 13:33 

.Morana
потому что вы пользуете IE, в других браузерах все работает

2007-12-15 в 20:35 

"умереть или быть убитым - это закон жизни. это лучше, чем жить без цели"(с)Киба
~narcissa
блин.. т.е. в Ие это не исправить никак?
у меня полупрозрачный фон в блоке меню текст нормально выделяется, а вот в основных записях и камментах - нет

2007-12-15 в 21:19 

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

вот так оно выглядит в MF

2007-12-16 в 00:12 

"умереть или быть убитым - это закон жизни. это лучше, чем жить без цели"(с)Киба
~narcissa
о блин :nerve:
я делала по первому способу... хм, да пожалуй надо менять...

2007-12-18 в 02:38 

forbiddenFRUIT
физический контакт.флирт.
про З.Ы.
я была бы следующей жертвой)))

2007-12-20 в 04:57 

Altair Vega
Огромное спасибо!
У меня все получилось сразу. И даже лучше, чем ожидала.
СПАСИБО.

2007-12-22 в 12:43 

Бей ерундовин!!
помогите пожалуйста тупому ребёнку, - в войне с css я терплю поражение на всех фронтах..(Т^Т)
по первому способу сделала полупрозрачный фон, который на "ура" отображается оперой, лисицей,
а вот шестым IE (как можно догадаться) не видится в упор, хотя и третий пункт кажется учтён..=="
(это мой код)

2007-12-22 в 13:07 

Бей ерундовин!!
сделала вторым способом, почти всё корректно, извините за беспокойство..%))

2007-12-24 в 17:44 

Время для счастья - сейчас.
Помогите, пожалуйста! :(
Надо чтобы меню продолжалось вместе с блоком и чтобы фон там был полупрозрачный. А общий фон д.б. неподвижен.

Сделала так:
#wrapper{background: none; background: url('/userdir/4/3/5/1/435101/27549305.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/4/3/5/1/435101/27549305.png', sizingMethod='scale'); zoom: 1; overflow:hidden;}
body{ background-attachment:fixed; }
#wrapper a, #wrapper input, textarea { position:relative; z-index: 2; }

В Опере всё прекрасно, так и надо, а в ИЭ - текст не выделяется, ссылки не кликабельны...
Выше девушка уже задавала такой вопрос, но ответа я не вижу.

2007-12-24 в 20:50 

Jazzmin
ответ был: в ИЕ вы это не исправите.
а вообще очень странно, я посмотрела ваш дневник через ИЕ, и там не только ссылки не работают, там и прозрачность пропадает(
если вам кто-ниб умный не подскажет, то я постараюсь найти свой старый код, потому что пробовала прозрачность и объединение блока меню с блоком записей и все работало (правда не знаю как было в ИЕ)

2007-12-25 в 00:37 

Время для счастья - сейчас.
~narcissa
спасибо за помощь)
в 6-м ИЕ вроде прозрачность была... а в 7-м действительно нет...
хочется всё же, чтобы и в ИЕ было всё пучком...

2008-01-10 в 17:34 

Ммммммм, вопрос.
Везде нужно вставить картинку, загнав её в БИ. Верно? Ну не везде, а только в последнем коде, так как полупрозрачный фон делает полупрозрачным всё - и картинки и шрифт и видео и т.д. Меня это не особо устраивает.
Выходит - нужно в пейнте или фотошопе сделать фон такого цвета, какой тебя устраивает, а потом его загнать в код.
А нельзя сделать это именно с кодом цвета вместо картинки, потому что здесь ты кое-как цвет нашёл, где гарантия что нужный цвет ты найдёшь в фотошопе?
короче. с кодом цвета из настроек оформления код для полупрозрачности никак не сделать?

2008-01-10 в 17:50 

~*~Крист~*~
код цвета из настроек оформления = коду цвета в фотошопе

2008-01-10 в 22:00 

~narcissa, значит всё так просто? спасибо. не знала. не слишком разобралась ещё в самом фотошопе.

2008-07-20 в 13:58 

Шоко_лад
Внимание! Радость воздушных шариков только снаружи! (с)
Ничего не понимаю...
Пытаюсь сделать полупрозрчный фон пока хотя бы в меню. Пользуюсь первым способом. Делаю все по пунктам. А потом открываю дневник, и фон просто непрозрачный...
Код:
#side { background: none; background: url('/userdir/7/8/6/9/786961/31753876.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/7/8/6/9/786961/31753876.png', sizingMethod='scale'); zoom: 1; }
#side a, #side input, textarea { position:relative; z-index: 2; }

Может с картинкой что-то не то?

UPD: вместо идиотского смайла двоеточие и D

2008-07-29 в 20:27 

[ 白人看不懂 ][я ем людей][заслуженный нереварин][Tragic Bronson]
Шоко_лад
у меня аналогичная история.
дело, как я поняла, в самом .png - у меня в библиотеке изображений он никак не хочет оставаться полупрозрачным. меняется на непрозрачный.
хотя на компе тот же файл в сохранённом виде столь же полупрозрачен, как и задумывалось.
и вот даже не знаю, как извратиться, чтоб это исправить.

2008-07-29 в 21:09 

Шоко_лад, [Ichimaru Rin]
об этой проблеме уже давно сообщили администрации, разработчики что-то там делали, сказали что сейчас на устранение проблемы нет времени. так что ждать еще долго.

2008-07-29 в 21:27 

[ 白人看不懂 ][я ем людей][заслуженный нереварин][Tragic Bronson]
~narcissa
о, спасибо, буду знать~~~
надо пересматривать диз, значит ТТ

2008-08-28 в 15:17 

bletchley.
Leibwachter
Вопрос такой - дайри убивают картинку подчистую. В смысле - она становится не прозрачной, просто белой. Ни фига не пойму как это изменить?

2008-08-28 в 22:38 

Mermaid
Эти глупые люди думают, что любовь есть, а русалок нет. Но мы-то с вами знаем, что все наоборот (с)
об этой проблеме уже давно сообщили администрации, разработчики что-то там делали, сказали что сейчас на устранение проблемы нет времени. так что ждать еще долго
ну вот... а я тут 1,5 часа мучила картинку, попутно читая комментарии :)

2008-08-30 в 20:17 

bletchley.
никак. проблема уже давно, и ее решение, похоже, не входит в ближайшие планы администрации дневников :-<

2008-10-05 в 22:47 

Я сам по себе мальчик ©
Подскажите, пожалуйста...
Испоьзую полупрозрачный фон по первому способу. У меня в ИЕ все отлично, а у ПЧ в Лисе - фон полностью прозрачный. С чем это может быть связано?..
код

2008-10-16 в 14:45 

Повелитель стихий
Привет Всем!
У меня проблема! :(.
Хочу полупрозрачный фон записей .
я вставляю код:

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

и у меня начинает дико тормозить браузер при прокрутке ( опера другими не пользуюсь..) - пробовал на нескольких машинах...
что делать не знаю Т_Т из-за чего это? помогите плз!
пробовать другие способы не очень хочется....в жабе я ноль, да и в ксс тоже xD

код дизайна страницы без прозрачности :


читать дальше

2008-10-19 в 16:27 

I hate spoilers! They ruin everything!
#thisDiaryPhoto {-moz-opacity:1.0 !important;opacity:1.0 !important; filter:alpha(opacity=100);} не работает(((( почему?

2008-11-08 в 23:48 

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

2008-12-04 в 21:33 

Бес без бесчувствия
Дивно. Тут все такие умные. Тогда может скажете, что нужно написать вместо *элемент*, чтобы меню и поле записи были полупрозрачными?

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@CSS — стилизация дневников

главная