Полупрозрачность

journals_covers — 08.01.2012

Меня периодически спрашивают как сделать полупрозрачный фон, вот — отвечаю.

Самый универсальный способ сделать это - с помощью полупрозрачного PNG.
Так как не все знают что это такое и где взять - я предлагаю несколько готовых кодов для полупрозрачности от 30 до 90%.

Градации прозрачности

90% background: transparent url(http://img-fotki.yandex.ru/get/4427/5091629.69/0_5e160_9d70191b_orig) repeat; 80% background: transparent url(http://img-fotki.yandex.ru/get/4428/5091629.69/0_5e15f_16fc7574_orig) repeat; 70% background: transparent url(http://img-fotki.yandex.ru/get/4429/5091629.69/0_5e15e_4061aae3_orig) repeat; 60% background: transparent url(http://img-fotki.yandex.ru/get/4529/5091629.69/0_5e15d_2e1765d3_orig) repeat; 50% background: transparent url(http://img-fotki.yandex.ru/get/4529/5091629.69/0_5e15c_8a0aa604_orig) repeat; 40% background: transparent url(http://img-fotki.yandex.ru/get/4429/5091629.69/0_5e164_8d35bdc9_orig) repeat; 30% background: transparent url(http://img-fotki.yandex.ru/get/4427/5091629.69/0_5e163_3725e8fd_orig) repeat;

90% background: transparent url(http://img-fotki.yandex.ru/get/5414/5091629.69/0_5e1f3_b96f4486_orig) repeat; 80% background: transparent url(http://img-fotki.yandex.ru/get/35/5091629.69/0_5e1f2_6508e1f_orig) repeat; 70% background: transparent url(http://img-fotki.yandex.ru/get/4528/5091629.69/0_5e1f1_522c724c_orig) repeat; 60% background: transparent url(http://img-fotki.yandex.ru/get/4429/5091629.69/0_5e1f0_2077ce05_orig) repeat; 50% background: transparent url(http://img-fotki.yandex.ru/get/4428/5091629.69/0_5e1ef_ff945ba3_orig) repeat; 40% background: transparent url(http://img-fotki.yandex.ru/get/35/5091629.69/0_5e1ee_553892f7_orig) repeat; 30% background: transparent url(http://img-fotki.yandex.ru/get/5414/5091629.69/0_5e1ed_5790f30e_orig) repeat;

Как установить?

1. Выберите желаемую прозрачность и скопируйте код для вставки (то что мелким шрифтом)

2. Если ваш дизайн сделан в генераторе, найдите в коде строчки типа background-color: #ffffff; и замените их на этот код.
    Если вы меняли фон ленты, вместо #ffffff у вас может быть другой цвет.
    Если вы используете стандартный шаблон, напишите какой, и я дам вам код для него.

3. Зайдите в журнал и проверьте что получилось. Носите с удовольствием : )

Внимание

1. Перед началом экспериментов сохраните код вашего дизайна в текстовый файл, чтобы иметь возможность быстро вернуть всё как было, если что-то пойдёт не так.

2. Не все стили в каталоге позволяют сделать полупрозрачный фон.

Оставить комментарий

Популярные посты:

• Архив