Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Как в css сделать прозрачный фон


Прозрачный фон при помощи CSS (свойство background) | Заметка CSS

Вам нужно сделать прозрачный фон, но при этом не прозрачные буквы (то есть opacity для этого не подходит)? Тогда я расскажу об одной интересной особенности CSS параметра background. Обычно заливка фона указывается вот таким способом (например серый цвет): Но есть и другой вариант указать тот же цвет, но уже с прозрачностью. Делается это вот так: background: rgba(220, 220, 220, 0.7); Где:

- первые 3 цифры (220, 220, 220) - это R, G и B координаты нужного цвета (можно подглядеть в палитре фотошопа, могу даже выложить фото, где именно, если интересно), причем они не всегда совпадают, просто в нашем случае так получилось;

- последняя цифра (0.7) - прозрачность в процентах, 0.7 = 70% (аналогично opacity впринципе). Кстати, если кому-то нужен прозрачный чисто черный overlay, то он будет выглядеть вот так: background: rgba(0, 0, 0, 0.7); У черного RGB всегда 0, такой уж цвет. Вот и весь секрет прозрачного background на CSS.

Верстайте на здоровье! =)

Виталий Жуков 21.02.2016 X комментариев Подробнее  Подписывайтесь на мой блог

Хотите первыми узнавать о самом интересном? Тогда подпишитесь на рассылку новостей.

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

Полупрозрачный фон на CSS

Всем привет! Сегодня хочу рассказать вам о том, как при помощи CSS сделать фон элемента на странице полупрозрачным. Это очень интересный эффект, который поможет сделать элементы вашей страницы более привлекательтными.

Я считаю, что не стоит рассматривать старые способы, например фон при помощи полупрозрачного изображения в формате PNG. Этот способ, к примеру, неудобен тем, что для смены цвета или величины прозрачности придется переделывать изображение.

Я же хочу рассказать о CSS3 свойстве opacity, которое как-раз задает полупрозрачный фон. Рассмотрим на примере:

BODY { background: url(bg.jpg); /* Фоновый рисунок */ } .opacity { margin: 400px 0 0 300px; width: 500px; background: #036; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ opacity: 0.6; /* Полупрозрачный фон */ color: #fff; /* Цвет текста */ }

Результат будет такой:

Значение данного свойства может изменяться от 0 до 1. То есть 1 — это полностью непрозрачный элемент, 0 — полностью прозрачный.

Необходимо помнить о том, что если вы прописываете полупрозрачный фон, то прозрачность будет задаваться и всем дочерним элементам.

Как сделать цвет фона div прозрачным в CSS

Проблема с opacity заключается в том, что она также повлияет на содержимое, когда часто вы этого не хотите.

Если вы просто хотите, чтобы ваш элемент был прозрачным, это действительно так же просто, как:

background-color: transparent;

Но если вы хотите, чтобы он был в цветах, вы можете использовать:

background-color: rgba(255, 0, 0, 0.4);

Или определите фоновое изображение (1px на 1px), сохраненное с правой alpha. (Для этого используйте Gimp, Paint.Net или любое другое программное обеспечение для изображений, которое позволяет вам это сделать. Просто создайте новое изображение, удалите фон и вставьте в него полупрозрачный цвет, затем сохраните его в png.)

Как сказал René, лучше всего было бы смешивать оба: сначала rgba и 1px от 1px, так как резерв, если браузер не поддерживает альфу:

background: url('img/red_transparent_background.png'); background: rgba(255, 0, 0, 0.4);

См. также: http://www.w3schools.com/cssref/css_colors_legal.asp.

Демо: My JSFiddle


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!