Прочитайте, как обстоят дела у сайта Дневников и как вы можете помочь!
×
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); }

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



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

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

Комментарии
2008-12-06 в 23:51 

Рёцке Рёцке а как сделать эпиграф прозрачны?
я написал #epigraph#{background: transparent}
не помогло((((

2008-12-07 в 06:37 

Тепер, спи до завтра, Спробуєм може, ще
V.Azazello, вторая # явно лишняя. попробуй:
#epigraph{background: transparent;}

2008-12-07 в 13:05 

муравей штата Вой пробовал!
тоже ничего((((((
может это из-за того, что у меня посты сплошной калонкой, а не табличками?

2008-12-07 в 20:00 

Тепер, спи до завтра, Спробуєм може, ще
V.Azazello, возможно эпиграф у тебя прозрачный, но под ним какой-то другой слой - нет.
попробуй плясать от обратного: сделай прозрачным весь фон записей, а потом закрашивай всё кроме эпиграфа.

2008-12-07 в 23:06 

муравей штата Вой скажите коды!

2008-12-08 в 05:25 

Тепер, спи до завтра, Спробуєм може, ще
"Прозрачный фон делается проще всего. Достаточно просто отключить цвета фона в настройках оформления - там, где у вас указан цвет в виде #FFAA00, надо оставить только решетку # или просто пустое место. Это стоит сделать в любом случае, если вы собираетесь работать с полупрозрачностью."

заливка как-нибудь так:
.singlePost.countSecond, .singlePost.countFirst {background-color:#00000000; }
..что получится - не знаю.)

2008-12-08 в 11:09 

муравей штата Вой .singlePost.countSecond, .singlePost.countFirst {background-color:#050505; }
дааа, вот этот код.
спасибо.

2008-12-10 в 22:37 

муравей штата Вой у меня тут такой вопрос я тут сделал полупрозрачность.
но проблема весьма неприятна. у меня записях картинки тоже стали полупрозрачными. что сделать, чтобы картинки и фото в записях стали нормальными.?

2008-12-10 в 22:37 

код у меня такой для записей:
#page-t .bordered {-moz-opacity:77 !important;opacity:77 !important; filter:alpha(opacity=77);}

2008-12-10 в 23:08 

You may call me a dreamer, call me a fool... © Kamelot
V.Azazello Полупрозрачность - а вот это когда полупрозрачно все - фон, текст и картинки. У меня, например, полупрозрачное меню.
так что делать другим способом.

2008-12-10 в 23:12 

air.raid.siren каким например?

2008-12-10 в 23:19 

You may call me a dreamer, call me a fool... © Kamelot
V.Azazello, в посте и про полупрозрачный фон написано, и про всё, дерзайте ;-)

2008-12-10 в 23:27 

air.raid.siren спасибо.

2009-02-08 в 00:10 

Britney Black
Танец — это вертикальное выражение горизонтального желания © (Бернард Шоу)
Огромное спасибо!!!!

2009-02-18 в 12:54 

Walterka
Доброго времени суток. У меня проблема следующего характера. Сделал полупрозрачный фон записей и меню. В мозилле, опере и седьмом ИЭ все отображается прекрасно, как надо. Но, по словам очевидцев, в еретическом шестом internet explorer'е не отображается фон записи, и текст становится совершенно нечитабелен на основном фоне дневника. Это неисправимо или все же есть какой-то способ, кроме того, чтобы советовать обладателям еретического браузера качать новую версию или отключать изображения?

2009-11-20 в 23:58 

Люблю и любима.
по этому образцу делаю прозрачный фон всему блогу, прозрачным также становятся и фото и эпиграф, можно ли этого избежать? и как?

2009-11-21 в 10:07 

Walterka
Вы же делаете полупрозрачным фон ВСЕГО БЛОГА, как сами только что сказали. Логично, что полупрозрачным будет все: меню, фото, эпиграф, текст записей и картинки в ленте дневника/избранного. Читайте внимательнее. Если не хотите этого - ставьте на фон блога полупрозрачный пнг.

2009-11-21 в 14:22 

Люблю и любима.
pic.ipicture.ru/uploads/091120/92yh3yR4r1.jpg
вот что у меня получается
и хочется что б так и было а картинки не просвечивали если это возможно

СПОСОБ I

Плюсы: Трушная полупрозрачность фона.
Минусы: Бывают глюки с отступами, которые никак, кроме ручной правки не исправляются. Я в свое время справился.
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;}

этот способ делает так
pic.ipicture.ru/uploads/091121/d3686Tau1a.jpg
и меня это нее устраивает

2010-03-16 в 23:29 

*#side div.bordered* {background: none; background: # repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/4/7/1/1471473/53124566.png', sizingMethod='scale'); zoom: 1;}
*#side div.bordered* a, *#side div.bordered* input, textarea { position:relative; z-index: 2; }
#side div.bordered {-moz-opacity:.45 !important;opacity:.45 !important; filter:alpha(opacity=45); }


пытаюсь сделать полупрозрачный фон. с CSS только-только начинаю.
-что я не так прописываю?
доп инфо: ос-мак, браузер-сафари

заранее спасибо. ;)

2010-03-17 в 08:44 

Walterka
macca, звездочки по краям объектов не нужны. В примере они стояли как кавычки.

2010-03-17 в 12:13 

fail better
Обновил с разрешения Рёцке запись: добавился способ сделать любому блоку полупрозрачный фоновый цвет без картинки, который работает во всех современных браузерах и IE5.5-8. Полупрозрачный фон — Способ I.

2010-03-17 в 17:22 

Walterkaубрала-не помогло(

2010-03-17 в 18:01 

macca, перечитайте первый пункт в заглавном посте. bokonist изменил его и добавил более простой способ.

2010-03-17 в 23:45 

Walterka не, я вот что не то делала-поняла-имя элемента не то прописывала
теперь все ок) спасибо!

2010-04-13 в 07:57 

Врагов я забрасываю цветами - в гробу. (c) Сальвадор Дали
Сделал себе дизайн по инструкции (способ 2). Во всех браузерах выглядит так, как задумывалось:


Но в ИЭ 8 прозрачность в разы меньше и какой-то ужас творится со шрифтами:


Понимаю, что все говорят про глючность ИЭ, но возможно ли исправить такой «эффект» (для душевного спокойствия)?

Пробовал первым способом — в ИЭ и Опере прозрачность работала нормально (в ИЭ снова искажался шрифт), но в других браузерах (ФФ, Сафари) отображался только полупрозрачный wrapper, а в блоках фон вообще исчезал. Что я не так делаю?

Фрагмент кода:
.left #wrapper { background: url('/userdir/1/6/0/6/160675/54137606.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/6/0/6/160675/54137606.png', sizingMethod='scale'); }
.left #wrapper a, .left #wrapper input { position:relative; z-index: 2; }

div.bordered { background: url('/userdir/1/6/0/6/160675/54137606.png') repeat bottom right !important; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/6/0/6/160675/54137606.png', sizingMethod='scale'); }
div.bordered a, div.bordered input { position:relative; z-index: 2; }

2010-04-13 в 11:55 

Walterka
Junger Lord, попробуйте способ с прозрачностью цвета, который предложил bokonist/

2010-04-13 в 21:30 

Врагов я забрасываю цветами - в гробу. (c) Сальвадор Дали
Walterka, вы про способ № 1? Так я же написал, что его тоже пробовал: прозрачность нормальная, но в ИЭ со шрифтами такая же история. Вот и хотелось бы узнать, возможно ли вообще в ИЭ избавиться от уничтожения сглаживания шрифтов? В принципе, я ИЭ не пользуюсь, но для личного спокойствия бы хотелось, чтобы у всех читателей одинаково красиво отображалось))

2010-04-13 в 21:46 

Walterka
Junger Lord, в настройках браузера отключить функцию "сглаживание шрифта" или что-то вроде того (не помню, как точно называлось), это не от дизайна зависит.

2010-04-13 в 21:58 

Врагов я забрасываю цветами - в гробу. (c) Сальвадор Дали
Walterka, у меня она отключена (попробовал включить — никаких изменений). И, к тому же, на прошлом дизайне такого не наблюдалось. Шрифт стал тонким только после установки полупрозрачного фона.

2010-04-13 в 22:57 

fail better
Junger Lord, сейчас у вас стоит rgba(183, 181, 200, .5) и filter:gradient #88b7b5c8 — 0x88 больше чем 50%, поэтому светлее, должно быть 0x80.

в вашем случае можно обойтись без прозрачности — сделайте три картинки разной яркости, задайте каждому блоку свою картинку в режиме fixed с позиционированием 50% 0 — они будут позиционироваться относительно body и совпадать на стыках.

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

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

главная