Зверь-чародей
Я удалил картинку 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*, напоминаю - в конце поста.
Самое сложное. Увы. Включайте мозг )
Плюсы: Самая трушная полупрозрачность фона.
Минусы: Фон может быть только сплошным полупрозрачным цветом, без картинок.
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, а дальше обычная шестнадцатиричная запись цвета.
Плюсы: Трушная полупрозрачность фона.
Минусы: Бывают глюки с отступами, которые никак, кроме ручной правки не исправляются. Я в свое время справился.
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;<br>zoom: 1; <br>}</i><br>Ссылка должна быть на СВОЮ картинку - ту, которую вы положили в БИ.<br>Она будет выглядеть приблизительно так: http: //static.diary.ru/userdir/9/3/1/2/93120/17332882.png<br>Посмотрите на код, посмотрите на вашу ссылку и вставьте по аналогии )<br><br><br><b>3. Для элементов, которым прописали полупрозрачноть, прописывам новое свойство ссылок</b><br>(не потеряйте <b>a</b> и <b>input</b>!):<br><font color=)
ЭТО ОФИГЕННО ВАЖНЫЙ ПУНКТ! Забудете - не будут работать ссылки в Internet Explorer
*element* a, *element* input, textarea
{
position:relative; z-index: 2;
}
4. Если ники скачут, прибиваем их гвоздями:
.authorName { float:none;}
Плюсы: Никаких глюков, короткий и простой код, работает всегда и везде.
Минусы: Не катит на фиксированном фоне и в некоторых других случаях.
Это не столько способ, сколько чит.
На самом деле эффекта полупрозрачности фона можно добиться, просто назначив точно такой же фон элементу, но подредактированный в графическом редакторе.
*element* - это штука, которую надо заменить на то, к чему бы собираетесь применить эффект
например
#side .bordered - меню
#side .menuSection - отдельные блоки меню
#page-t .bordered - блок записей
Т.е. код для полупрозрачности всего блока меню будет выглядеть так:
#side div.bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); }
З.Ы. Еще раз кто-то запостит новой темой вопрос про прозрачность - поубиваю ))
!СЛАВА РОБОТАМ!
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); }
Спасибо за внимание
З.Ы. Еще раз кто-то запостит новой темой вопрос про прозрачность - поубиваю ))
!СЛАВА РОБОТАМ!
-
-
07.12.2007 в 21:26-
-
08.12.2007 в 17:01#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
#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
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
.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
=====
Помогите, пожалуйста!!!
-
-
15.12.2007 в 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. в опере смотрела, тоже самое. очень прошу помощи!
-
-
15.12.2007 в 04:56-
-
15.12.2007 в 13:33потому что вы пользуете IE, в других браузерах все работает
-
-
15.12.2007 в 20:35блин.. т.е. в Ие это не исправить никак?
у меня полупрозрачный фон в блоке меню текст нормально выделяется, а вот в основных записях и камментах - нет
-
-
15.12.2007 в 21:19а вы по какому способу прозрачность делали? я смотрю через МФ и полупрозрачно только меню, а блок записей остается как есть. вообще странно очень у вас все выглядит. я полгода использовала полупрозрачность по первому способу и все отлично работало (кроме выделения текста в ИЕ, но это проблемы пч). кроме того, в ИЕ полупрозрачность фона становится меньше ровно в два раза, т.е. если фоновая картинка заливалась с 20% интенсивностью, то в ИЕ она отображается на 40%.
меняйте браузер и не мучайтесь.
вот так оно выглядит в MF
-
-
16.12.2007 в 00:12о блин
я делала по первому способу... хм, да пожалуй надо менять...
-
-
18.12.2007 в 02:38я была бы следующей жертвой)))
-
-
20.12.2007 в 04:57У меня все получилось сразу. И даже лучше, чем ожидала.
СПАСИБО.
-
-
22.12.2007 в 12:43по первому способу сделала полупрозрачный фон, который на "ура" отображается оперой, лисицей,
а вот шестым IE (как можно догадаться) не видится в упор, хотя и третий пункт кажется учтён..=="
(это мой код)
-
-
22.12.2007 в 13:07-
-
24.12.2007 в 17:44Надо чтобы меню продолжалось вместе с блоком и чтобы фон там был полупрозрачный. А общий фон д.б. неподвижен.
Сделала так:
#wrapper{background: none; background: url('/userdir/4/3/5/1/435101/27549305.png') repeat bottom right !important; background-image: none; filter: progid
body{ background-attachment:fixed; }
#wrapper a, #wrapper input, textarea { position:relative; z-index: 2; }
В Опере всё прекрасно, так и надо, а в ИЭ - текст не выделяется, ссылки не кликабельны...
Выше девушка уже задавала такой вопрос, но ответа я не вижу.
-
-
24.12.2007 в 20:50ответ был: в ИЕ вы это не исправите.
а вообще очень странно, я посмотрела ваш дневник через ИЕ, и там не только ссылки не работают, там и прозрачность пропадает(
если вам кто-ниб умный не подскажет, то я постараюсь найти свой старый код, потому что пробовала прозрачность и объединение блока меню с блоком записей и все работало (правда не знаю как было в ИЕ)
-
-
25.12.2007 в 00:37спасибо за помощь)
в 6-м ИЕ вроде прозрачность была... а в 7-м действительно нет...
хочется всё же, чтобы и в ИЕ было всё пучком...
-
-
10.01.2008 в 17:34Везде нужно вставить картинку, загнав её в БИ. Верно? Ну не везде, а только в последнем коде, так как полупрозрачный фон делает полупрозрачным всё - и картинки и шрифт и видео и т.д. Меня это не особо устраивает.
Выходит - нужно в пейнте или фотошопе сделать фон такого цвета, какой тебя устраивает, а потом его загнать в код.
А нельзя сделать это именно с кодом цвета вместо картинки, потому что здесь ты кое-как цвет нашёл, где гарантия что нужный цвет ты найдёшь в фотошопе?
короче. с кодом цвета из настроек оформления код для полупрозрачности никак не сделать?
-
-
10.01.2008 в 17:50код цвета из настроек оформления = коду цвета в фотошопе
-
-
10.01.2008 в 22:00-
-
20.07.2008 в 13:58Пытаюсь сделать полупрозрчный фон пока хотя бы в меню. Пользуюсь первым способом. Делаю все по пунктам. А потом открываю дневник, и фон просто непрозрачный...
Код:
#side { background: none; background: url('/userdir/7/8/6/9/786961/31753876.png') repeat bottom right !important; background-image: none; filter: progid
#side a, #side input, textarea { position:relative; z-index: 2; }
Может с картинкой что-то не то?
UPD: вместо идиотского смайла двоеточие и D
-
-
29.07.2008 в 20:27у меня аналогичная история.
дело, как я поняла, в самом .png - у меня в библиотеке изображений он никак не хочет оставаться полупрозрачным. меняется на непрозрачный.
хотя на компе тот же файл в сохранённом виде столь же полупрозрачен, как и задумывалось.
и вот даже не знаю, как извратиться, чтоб это исправить.
-
-
29.07.2008 в 21:09об этой проблеме уже давно сообщили администрации, разработчики что-то там делали, сказали что сейчас на устранение проблемы нет времени. так что ждать еще долго.
-
-
29.07.2008 в 21:27о, спасибо, буду знать~~~
надо пересматривать диз, значит ТТ
-
-
28.08.2008 в 15:17-
-
28.08.2008 в 22:38ну вот... а я тут 1,5 часа мучила картинку, попутно читая комментарии
-
-
30.08.2008 в 20:17никак. проблема уже давно, и ее решение, похоже, не входит в ближайшие планы администрации дневников :-＜
-
-
05.10.2008 в 22:47Испоьзую полупрозрачный фон по первому способу. У меня в ИЕ все отлично, а у ПЧ в Лисе - фон полностью прозрачный. С чем это может быть связано?..
код
-
-
16.10.2008 в 14:45У меня проблема!
Хочу полупрозрачный фон записей .
я вставляю код:
#page-t div.bordered {-moz-opacity:.70 !important;opacity:.70 !important; filter:alpha(opacity=70);zoom:1; }
и у меня начинает дико тормозить браузер при прокрутке ( опера другими не пользуюсь..) - пробовал на нескольких машинах...
что делать не знаю Т_Т из-за чего это? помогите плз!
пробовать другие способы не очень хочется....в жабе я ноль, да и в ксс тоже xD
код дизайна страницы без прозрачности :
читать дальше
-
-
19.10.2008 в 16:27-
-
08.11.2008 в 23:48я не знаю что делать.
-
-
04.12.2008 в 21:33