В большинстве случаев этого вполне достаточно, однако иногда вам
нужен лучший контроль над ситуацией. Возникает вопрос — а нельзя ли фон
текста сделать прозрачным? По счастью, это возможно. Вот как это
работает:
Прозрачный
фон делается проще всего. Достаточно просто отключить цвета фона
в настройках оформления - там, где у вас указан цвет в виде
#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 -
блок записей
Т.е. код для полупрозрачности всего блока меню будет
выглядеть так: