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

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



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


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

Комментарии
13.04.2010 в 23:05

Врагов я забрасываю цветами - в гробу. (c) Сальвадор Дали
bokonist, спасибо за исправление 88)) я, честно говоря, не очень понимаю, как это высчитывается. Только проблема со шрифтом осталась.
13.04.2010 в 23:08

Junger Lord, вы ставите полупрозрачные картинки?
13.04.2010 в 23:16

Врагов я забрасываю цветами - в гробу. (c) Сальвадор Дали
Walterka, по второму способу — да. По первому — нет.
13.04.2010 в 23:23

Junger Lord, Букинист вам предложил сделать непрозрачные картинки, наложив в фотошопе на фон полупрозрачный слой, залитый цветом, и сохранить это в джипеге или гифе, а затем поставить на фон блока записей (или куда там надо?), зафиксировав этот самый фон.
13.04.2010 в 23:30

Врагов я забрасываю цветами - в гробу. (c) Сальвадор Дали
Walterka, а, Вы об этом. Ещё не пробовал, завтра испытаю. В любом случае спасибо.
13.04.2010 в 23:57

fail better
Junger Lord, дествительно, многие фильтры отключают cleartype в IE, увы. если вам дорого сглаживание в IE попробуйте вариант без прозрачности.
08.11.2010 в 22:59

Cogito ergo sum
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;
}


Выделенные элементы конфликтуют между собой. Либо вы прописываете единый элемент background, либо отдельные свойства для background-image и background-color (кстати, почему тут не упоминается, что он может быть transparent?).
И с ссылкой у вас косяк.

Правильнее, на мой взгляд, выглядит нечто вот такое:



Поправьте в посте, пожалуйста, а то народ путается.
09.11.2010 в 12:33

fail better
Katze, вы правы, первая строчка тут не имеет смысла. Но если вы попробуете ваш код в IE6-7, увидите наложение двух картинок, одна из которых будет с серым непрозрачным фоном в IE6. AlphaImageLoader добавляет картинку между фоном блока и его содержимым. Чтобы убрать фоновую картинку в IE6 используется !important-хак.

Если поддержка IE6 не интересует, следует пользоваться первым способом без картинок.
09.11.2010 в 12:52

Cogito ergo sum
bokonist, однако в FF и хроме такой код может быть воспринят неправильно (и такое происходит). Может, стоит указать, что этот способ корректен только для IE? А то у людей бэграунд пропадает.
10.11.2010 в 00:55

fail better
Katze, во всех браузерах кроме IE6 применится только вторая строчка. Вы можете показать пример, где этот код вызвал проблемы?
10.11.2010 в 01:24

Cogito ergo sum
diarycss.diary.ru/p133055996.htm
Броузер хром. Копировали код так, как здесь написано. Поэтому, собственно, и попросил поправить.
06.01.2012 в 21:56

ни один из способов не помог.. :upset: Все делала по инструкции.
только последний, но там все становится полупрозрачным.
07.01.2012 в 21:51

ocean-fantasy, какой браузер? Не ИЭ, случаем? Можете показать коды?
08.01.2012 в 00:06

Walterka, , браузера 2 - Мозилла и Опера. Самые новые версии.
я вчера намудрила с кодами..

Хотелось бы сделать фон записи полупрозрачным а фон дневника фиксированным. Знаю, что этот код косячный, но так как я совершенно не разбираюсь в CSS намудрила, а исправить или до ума довести уже не могу :upset:
08.01.2012 в 01:06

ocean-fantasy, смотрите, у вас в background стоит # вместо ссылки на картинку. Вы как указываете путь к картинке? Надо так"secure.diary.space/userdir/", а у вас, наверное, она целиком: "http://" Так?
08.01.2012 в 01:07

Не обращайте внимания на мой аватар, они рандомно выскакивают, пока подписка платная не продлена ><
08.01.2012 в 01:22

Walterka, я вчера так указывала:

но фон записи вообще стал полностью прозрачным. Такой код в исходнике дизайна днева, который я переделывала под себя..) вот тут диз
читать дальше
08.01.2012 в 01:48

ocean-fantasy, так вы перед скобками забыли url написать
08.01.2012 в 01:49

body{background:# url("secure.diary.space/userdir/2/7/2/0/2720242/7301...") 0 50% fixed no-repeat;}
08.01.2012 в 02:00

Walterka, :small: не идет. Все остается как было, даже не рыпается..
08.01.2012 в 02:15

body{background: url("secure.diary.space/userdir/2/7/2/0/2720242/7301...") 0 50% fixed no-repeat;}
08.01.2012 в 02:37

вообще фон днева пропал - все белым-бело х). Блин, у меня проклятый дайр... )
08.01.2012 в 02:53

Ох, тьфу, ну конечно... *лицорука* Там же не кавычки должны быть)
body{background: url('/userdir/2/7/2/0/2720242/73019641.png') 0 50% fixed no-repeat;}
08.01.2012 в 03:04

Walterka, он точно проклятый :facepalm3:

я когда ставлю код - убираю цвет с фона записи днева. Мне сказали что лучше его убирать, когда pngгшку ставишь на фон... Это не может повлиять? Хотя когда цвет оставался - тот же результат - ноль эмоций фунт презрения от диза..)
08.01.2012 в 13:06

ocean-fantasy, хм... да нет, все правильно - надо убирать. А у вас вроде в коде и не прописан нигде полупрозрачный фон записи - вы что-то делаете с фоном дневника, а фон записи надо прописывать к #page-t или #page-c, например.
08.01.2012 в 13:09

ЗЫ: кстати, у вас в дневнике комментарии и ссылки, кроме как в меню, не открываются, потому что вы не добавили к ID a (обозначение того, что это рабочая ссылка).
08.01.2012 в 13:16

Walterka, :-D я не поняла ничего)). Ну да ладно - пока просто повешу обычный диз).Спасибо за помощь!) :white:

08.01.2012 в 14:00

ocean-fantasy, вам надо было прописать #page-t {background: url('/userdir/blavblabla.png');}
где #page-t - блок записей, а url('блаблабла.png') - ваша картинка с полупрозрачным фоном
Кажется, я понял, в чем дело. Вы хотели сделать белый полупрозрачный фон записей, да?
Но вместо этого прописали это фоном к самому дневнику (body), поэтому у вас там все белое стало.
08.01.2012 в 14:26

Walterka, ааа!!!!!!!!))))) простите, но я так рада!) все работает!!))
огромное спасибо вам!
08.01.2012 в 14:43

ocean-fantasy, не за что).