Как сделать прозрачность только фону


  • С приходом CSS3 работа верстальщиков во многом стала проще и логичнее: ведь теперь можно действительно гибко настроить какой-либо объект, все реже прибегая к JavaScript. Допустим, вам надо настроить прозрачность фона — CSS тут же предлагает несколько вариантов.

    Прозрачность фона CSS

    Фон задается набором атрибутов (background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color), причем каждый из них можно прописать отдельно или же объединить под атрибутом background. Разберем каждый из них подробнее.

    Атрибут background-color

    В CSS цвет фона можно задать несколькими способами: с помощью шестнадцатеричного кода, названия цвета или RGB-записи. В CSS3 стало возможно использовать вместо RGB-записи вариант с RGBA.

    Шестнадцатеричный код цвета записывается в свойстве после решетки: background-color: #FFDAB9. Если же символы в такой записи попарно совпадают, код обычно немного сокращают: #ccff00 можно записать как #cf0:

    body {background-color: #cf0;}.

    Название есть даже у самых экзотичных цветов. Например, помимо стандартных red и white вы можете использовать NavajoWhite (#FFDEAD) или Honeydew2 (#E0EEE0):

    body {background-color: purple;}.

    Последний вариант RGB или RGBA записи позволяет задавать не только цвет, но и прозрачность фона CSS, однако способ работает в IE только старше 9 версии. Остальные браузеры нормально распознают вариант с прозрачностью. По стандартам W3C предпочтительно использовать все-таки RGBA вместо более привычного RGB.

    Последнее значение у RGBA и задает непрозрачность фона от 0 (прозрачный) до 1 (непрозрачный).

    css цвет фона

    Есть еще некоторые необычные значения. Цвет фона можно задать с помощью HSL и HSLA. Оба были добавлены в CSS3, а потому не поддерживаются IE ниже 9 версии. Варианты идентичны RGB или RGBA, только в другом формате: Hue (оттенок — значение на цветовом круге, задается в градусах), Saturate (насыщенность — интенсивность цвета в процентах, от 0 до 100), Lightness (светлота — яркость, измеряется аналогично параметру Saturate).

    Атрибут background-image

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

    body {background-image: url(bg1.png), url(bg2.png)}.

    Такой способ поддерживает даже IE8. Несколько изображений в качестве фона используются при резиновой верстке. Главное, не забывайте при использовании любого изображения также задавать в CSS цвет фона, так как у пользователей может просто не загрузиться картинка.

    Атрибут background-position

    Если вы используете изображение, чтобы задать фон блока, CSS позволит вам расположить картинку в любом месте экрана. По умолчанию изображение располагается в левом верхнем углу. Атрибут принимает либо словесные указания (top, bottom, left, right), либо численные (проценты, пиксели и другие единицы измерения). При этом необходимо указать два значения: по горизонтали и по вертикали:

    как сделать прозрачность только фону alt="CSS растянуть фон" src="http://fb.ru/misc/i/gallery/27880/604802.jpg">body {background-position: right center;} — в этом примере фон будет располагаться в правой части страницы, причем снизу и сверху расстояния до изображения одинаковы.

    Атрибут background-size

    Иногда требуется с помощью CSS растянуть фон или уменьшить его размер. Для этого используют атрибут background-size, причем размер фона можно задать как в пикселях или процентах, так и в любых других единицах измерения.

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

    Атрибут background-attachment

    Этот атрибут задает поведение фонового изображения при прокрутке. Так, он может принимать 3 значения (не учитывая inherit, общего для всех представленных в этой статье атрибутов):

    • fixed — делает картинку на фоне неподвижной;
    • scroll — фон прокручивается вместе с остальными элементами;
    • local — изображение на фоне прокручивается, если прокрутку имеет содержимое. Фон, который выходит за рамки содержимого, фиксируется.

    Пример использования:

    body {background-attachment fixed}.

    В настоящее время Firefox не поддерживает последнее свойство (local).

    Атрибут background-origin

    Этот атрибут отвечает за позиционирование элемента. Браузеры ранних версий требуют использования префиксов. Само свойство имеет три параметра:

    • padding-box позиционирует фон относительно края, при этом учитывая толщину рамки;
    • border-box отличается от предыдущего свойства тем, что линия границы может полностью или частично перекрывать фон;
    • content-box позиционирует изображение, прявязывая его к контенту.

    Если задано несколько значений, то браузеры могут реагировать по-своему: Firefox и Opera воспринимают только первый вариант.

    Атрибут background-repeat

    Как правило, если фон задан изображением, он должен повторяться по горизонтали или вертикали. Для этого и используется атрибут background-repeat. Так, фон блока, CSS которого содержит такое свойство, может иметь один из нескольких параметров:

    • no-repeat — изображение появляется на странице в единственном варианте;
    • repeat — фон повторяется по осям x и y;
    • repeat-x — только по горизонтали;
    • repeat-y — только по вертикали;
    • space — фон повторяется, но если пространство заполнить не получается, то между картинками появляются пустоты;
    • round — изображение масштабируется, если не получается всю область заполнить целыми картинками.

    Пример использования атрибута:

    body {background-repeat: no-repeat repeat} — аналогично background-repeat: repeat-y.

    Фон блока CSSВ CSS3 возможно задать значения для нескольких изображений, если перечислять параметры через запятую.

    Атрибут background-clip

    Этот атрибут определяет поведение фона под границами (например, в случае пунктирных рамок):

    • padding-box — фон отображается строго внутри блока;
    • border-box — изображение заходит под рамки;
    • content-box — картинка на фоне появляется только внутри содержимого.

    Пример использования:

    body {background-clip: content-box;}.

    Chrom и Safari требуют использования префикса -webkit-.

    Атрибуты opacity и filter

    Атрибут opacity позволяет задать прозрачность фона — CSS свойство будет работать во всех браузерах. Значение устанавливается в пределах от 0.0 до 1.0 включительно. При этом вы можете установить прозрачность фона CSS без целого значения: вместо 0.3 достаточно написать.3:

    .block {background-image: url(img.png); opacity:.3;}.

    Чтобы задать прозрачность фона, CSS которого подойдет даже для IE ниже девятой версии, используйте атрибут filter:

    .block {background-image: url(img.png); filter: alpha(opacity=30);}.

    В этом случае значение opacity устанавливается в пределах от 0 до 100. Учтите, что атрибут opacity отличается от настройки прозрачности с помощью RGBA наследственностью: при использовании opacity прозрачным становится не только фон, но и все элементы внутри блока.

    задать прозрачность фона CSS

    Всегда следите за статистикой использования браузеров по СНГ и всем остальным странам. Самая большая проблема всех верстальщиков — старые версии IE, именно они не позволяют использовать в полной мере CSS3. При верстке не забывайте пользоваться специальными сервисами, которые проверяют, поддерживает ли ваш браузер какое-либо свойство CSS. Если вы не можете установить старые версии браузеров, найдите сервис, который проверит работу сайта в разных браузерах онлайн.



    Рекомендуем посмотреть ещё:


    Закрыть ... [X]

    Прозрачность фона CSS. Как сделать прозрачный и полупрозрачный фон на сайте Как mail сделать главной страницей яндекс

    Как сделать прозрачность только фону Как сделать прозрачность только фону Как сделать прозрачность только фону Как сделать прозрачность только фону Как сделать прозрачность только фону Как сделать прозрачность только фону

    ШОКИРУЮЩИЕ НОВОСТИ