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

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

Для создания эффекта прозрачности в CSS используется свойство opacity. Браузер IE8 и более ранние его версии поддерживают альтернативное свойство — filter:alpha(opacity=x) , где " x " может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.

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

  1. Щелкните Вид (View) > Изображения (Images). Откроется вкладка Изображения (Images).
  2. Выберите изображение в графическом окне.
  3. Щелкните Задать цвет прозрачности (Set Transparent Color). .
  4. Щелкните на изображении цвет, который требуется сделать прозрачным.

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

Если у вас есть 6-значный цветовой код, например #ffffff,, замените его на #ffffff00., просто добавьте 2 нуля в конце, чтобы сделать цвет прозрачным.

Как сделать полупрозрачный блок в HTML?

Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта.

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

  1. 0% (прозрачный) -> # 00 в шестнадцатеричном формате
  2. 20% -> # 33.
  3. 50% -> # 80.
  4. 75% -> # C0.
  5. 100% (непрозрачный) -> #FF.

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

Нажмите правой кнопкой мыши на слой изображения в Photoshop. Выберите ‘Слой из фона’ (Layer From Background). Выбрав нужную область, нажмите на ‘Удалить’ (Delete) на вашей клавиатуре. После этого Вы должны видеть прозрачный фон вокруг изображения.

Как создать изображение с прозрачным фоном?

  1. Дважды щелкните рисунок и на появившейся вкладке Работа с рисунками щелкните Формат и Цвет.
  2. Выберите пункт Установить прозрачный цвет и после изменения вида указателя щелкните цвет, который требуется сделать прозрачным.

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

Выделите объект, перейдите на вкладку «Работа с рисунками» – «Формат», нажмите на кнопку «Цвет» и выберите из открывшегося списка «Установить прозрачный цвет». После этого курсор примет вид палочки с уголком на кончике. Кликните им по тому цвету на картинке, который нужно сделать прозрачным.

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

Выберите рисунок и перейдите в формат рисунка > Цвет или Средства работы с рисунками >Формат >Цвет. Выберите Установить прозрачный цвет. Когда указатель изменится, выберите цвет, который вы хотите сделать прозрачным.

Как сделать прозрачный блок в CSS?

  1. Свойство opacity. Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. .
  2. Функция rgba() .
  3. Функция hsla()

Как связать между собой html и css файлы?

Связывание CSS хранятся в отдельном файле. Для ссылки на этот файл с HTML-страницы используется тег <link> между тегами <head> , как показано в следующем примере, который предполагает, что таблица стилей хранится в файле с именем «style. css».

Как сделать полупрозрачный фон в таблице HTML?

Чтобы сделать таблицу полупрозрачной, достаточно к селектору TABLE добавить opacity: 0.5. Возникает соблазн аналогичное действие проделать и с селектором TD, только задав ему opacity: 1. Однако ожидаемого результата не произойдет, ячейка останется полупрозрачной.

Как сделать полупрозрачный фон текста в презентации?

Давайте разберемся, как можно сделать прозрачный фон в PowerPoint и не только. Изменить прозрачность фона, рисунка или картинки, можно в диалоговом окне «Формат фона». Выделите нужные слайды и откройте указанное диалоговое окно. На вкладке «Заливка» в поле «Прозрачность» передвиньте ползунок в нужное положение.

Background прозрачность css – серый прозрачный фон. Прозрачность фона CSS

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

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

Атрибут background-color

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

Атрибут background-position

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

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

Атрибут background-size

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

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

Атрибут background-attachment

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

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

В настоящее время 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: repeat-y.

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

Атрибут background-clip

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

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

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

Атрибуты opacity и filter

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

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

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

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

Сегодня я хочу поговорить о прозрачном фоне блока текста, как его делать, и что для этого предлагает CSS3. Перед тем, как перейти к rgba и hsla, рассмотрим примеры использования полупрозрачного фона для блока с текстом, а точнее то, как это достигается и какие проблемы возникают. Для демонстрации будем использовать вот эту картинку, обработанную какой-то программой на java, и линк на которую, к сожалению, был давно утерян.

Смотрим на картинку ниже. Имеется графический фон, на который требуется наложить полупрозрачный блок с текстом. В идеале должно быть то, что на рисунке под цифрой 2, но иногда может возникать то, что под цифрой 3. Есть ещё один дефект, но о нём упомяну словесно чуть ниже, т.к. отскриншотить его не было возможности.

Полупрозрачный фон без rgba и hsla

  1. Полупрозрачный PNG. Оптимальный вариант, т.к. на сегодняшний день он самый кроссбраузерный и самый простой. Для того, чтобы блок был прозрачен, необходим однопиксельный полупрозрачный PNG, который задан в качестве бэкграунда блока. И всё.

    Недостатки
    : Только один – требуется .
  2. Прозрачность через opacity. Прозрачность блока задаётся кроссбраузерно следующим образом:

opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;

где 0,5 и 50 – это 50% прозрачности. Но есть проблема. Если мы зададим нужному нам блоку такую полупрозрачность, то мы увидим тот третий вариант на изображении выше – контент блока также станет полупрозрачным. Однако выход есть – свободное позиционирование, при помощи которого под блок текста кладётся другой блок, которому и задана полупрозрачность..

Рассмотрим пример. Пусть блок с оранжевой картинкой – это тег body, контейнер, в котором будет и текст и прозрачная подложка – #block_bg, внутри которого блок с полупрозрачным фоном #block_transparent, а блок с текстом – #block_text.

body < background: url(image.jpg); >
#block_bg <
position: relative;
overflow: hidden;
width: 400px;
padding: 10px;
>
#block_text < position: relative; z-index: 100; >
#block_transparent <
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 90;
height: 5000px;
width: 400px;
>

Обращаю внимание, что необходимо задавать ширину прозрачного блока (строка 19), иначе он свернётся в 1 пиксел, и ширину общего блока (строка 5), иначе текст будет выходить за пределы прозрачного блока (хотя ширину можно и тексту задать, но принципиальной разницы не будет). Чтобы были отступы от текста и края прозрачного блока, используем паддинг в шестой строке. Чтобы прозрачность была регулируема по высоте, задаём ей высоту побольше (строка 18) и перекрытие для общего блока (строка 4).
Итак, мы запихнули всё в один блок, который можно пихать в любую часть страницы, где есть интересная подложка. Да, может возникнуть желание поставить бэкграунд общему блоку block_bg, но лучше не стоит – осложните себе жизнь (в зависимости, конечно, от задачи). Иными словами, лучше всю эту конструкцию запихнуть в отдельный блок, которому задать паддинг и не мучиться.
Недостатки : Слишком громоздко.

rgb и hsl, rgba и hsla – свойства CSS3

Точнее это не совсем свойства – это новая возможность задавания цвета для таких свойств как background, color, border и т.д.

Название свойств пошли от цветовых систем RGB (Red, Green, Blue) и от HSL (Hue, Satutation, Lightness). Первая система описывает цветовое пространство посредством смешивания основных цветов – красного, зелёного и синего. Во второй системе компоненты цвета отображают информацию о цвете в более привычной для человека форме: Что это за цвет? Насколько он насыщенный? Насколько он светлый или тёмный?

rgb и rgba

Начнём с rgb и rgba. Значения r, g, b могут задаваться от 0 до 255 или от 0% до 100%. Значение a (alpha, прозрачность) измеряется от 0 до 1 (дробные значения задаются через точку – 0.4, 0.7 и т.д.). Если для r, g и b будут задаваться значения, превышающие их допустимый диапазон (например, 300 или 110% или -5), то они сократятся к ближайшему допустимому значению.

Рассмотрим всё на примере свойства background (хотя желающие могут взять color или border).

background: rgb(0, 0, 255); /*чисто синий цвет*/
background: rgb(100%, 50%, 0%); /*чисто синий цвет*/
background: rgb(10, 145, 500); /*будет распознано как 10, 145, 255*/
background: rgba(10, 145, 255, 1); /*тоже самое, что и предыдущее*/
background: rgba(100, 50, 255, 0.1); /*очень прозрачный оттенок сиреневого*/

Да, забыл сказать, что нельзя между свойством и открывающей скобкой ставить пробел и нельзя задавать в одной строке одни значения в обычных числах, а другие в процентах. Если так сделаете – ничего не будет работать.

hsl и hsla

И несколько слов о hsl и hsla. Значение a задаётся также, как и у rgb и rgba, а с первыми тремя параметрами дело обстоит немного по другому. h задаётся от 0 до 360, а s и l – от 0% до 100%.

И самое главное. Если в rgb определить цвет из головы очень сложно (почти всегда необходима сторонняя программа с "пипеткой"), то здесь достаточно иметь одну картинку перед глазами, чтобы всё стало на свои места. Картинка показывает оттенки параметра h.

Чтобы прикинуть необходимый цвет, выбираем оттенок, затем прикидываем s, насыщенность цвета (где 0% – это ненасыщенный цвет (оттенок серого), а 100% – самая насыщенность) и его светлоту (0% – при нём цвет всегда будет чёрный, а при 100% — белый). Исходя из вышесказанного, на картинке показаны световые тона при насыщенности 100% и светлоте 50%.

Теперь всё цветовое пространство в голове как на ладони. Конечно ручной подбор не заменяет пипетку, да и не всем нужно в голове иметь "цветовое пространство", но иногда, чтобы быстро прикинуть что надо и потестить – оно подходит.

И буквально пара примеров

background: hsl(180, 100%, 50%); /*насыщенный голубой цвет*/
background: hsla(140, 50%, 30%, 0.5); /*полупрозрачный, едва заметно, что оттенок зелёного*/

Недостатки : все 4 свойства не поддерживаются ишаком и старыми браузерами.

В общем, CSS3 даёт очередные очень полезные вещи, но как всегда, IE – основной тормоз прогресса. Для сайтов клиентов я бы пока воздержался от использования (ещё мозг зазря будут выносить) и брал бы вариант с PNG. А на своём сайте – почему бы и нет. Особенно, если его посещают продвинутые люди, не сидящие на ишаках или каких-либо осколках древности.

Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.

Как задать прозрачность?

Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:

  • Свойство opacity .
  • Использование PNG -картинки
  • Формат системы RGBA
  • Ну, и наконец, древность или клетчатые изображения.

CSS свойство Opacity

Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.

TODO supply a title Тут будет много Вашего текста

В результате мы получили полупрозрачный блок:

  1. Opacity принимает значения из диапазона: 0 (полная прозрачность) – 1 (непрозрачность).
  2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:

filter: alpha(Opacity= 70 ) ;

Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:

  • с абсолютным позиционированием (position: absolute )
  • с фиксированным линейным размером (height или width ).

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

и рассмотрим его под микроскопом:

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

  1. В отличии от свойства opacity прозрачность задается только для фона
  2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6 . Если вы оптимизируете свой сайт под такую древность – придется применять другие методы или скрипты.
  3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
  4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA .

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha -канала, характеризующего степень прозрачности.

background: rgba(r, g, b, a) ;

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

  1. В отличии от свойства opacity прозрачность задается только фону
  2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba .
  3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9 , Op10 , Fx3 ,Sf3.2 ).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity , png методы.

Клетчатые изображения, или с уважением к истории

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

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

  1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
  2. В остальном особенности применения аналогичны с методом «PNG -картинки».

Подытожим?

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

Главное нужно указать картинку на вашем компьютере или телефоне, а затем нажать кнопку ОК внизу этой страницы. По умолчанию однотонный фон картинки заменяется на прозрачный. Цвет фона исходной картинки определяется автоматически, нужно лишь указать в настройках, на какой цвет его заменять. Основным параметром, влияющим на качество замены, является «Интенсивность замены» и для каждой картинки она может быть разной.

Пример фотографии розовой розы без изменений и после замены однотонного фона на прозрачный, белый и зелёный:


Первый пример с цветком розы на прозрачном фоне сделан с такими настройками:
1) Интенсивность замены — 38;
2) Сглаживание по краям — 5;
3) Заменить однотонный фон на — прозрачный;
4) Обрезка ( 0) по краям — "-70";
5) Инвертировать — отключено (галка не стоит).

Для создания второго примера , с белым фоном, использовались такие же настройки, как и в первом примере, кроме параметра: «Заменить однотонный фон на» — белый. В третьем примере , с зелёным фоном, также использованы настройки, как и в первом примере, кроме параметра: «цвет в формате hex» — #245a2d.

Исходное изображение никак не изменяется. Вам будет предоставлена другая обработанная картинка с прозрачным или указанным вами фоном.

Всем привет. Как вы возможно знаете, background – это css-свойство, которое позволяет задать цвет фона или загрузить изображение, которое будет выступать в качестве фонового. В CSS3 также появилась возможность создания линейных и радиальных градиентов, но это тема для отдельной статьи. В этой же я хотел рассказать, как в css у свойства background задать прозрачность.

Задаем прозрачность у css background

Итак, все это делается очень просто благодаря такому формату записи цвета, как rgba . Если вы работаете с графическими редакторами, то наверняка знаете, что цветовой режим rgb расшифровывается так: доля красного цвета (red), доля зеленого (green) и синего (blue). Так вот, rgba практически тоже самое, только добавляется еще один параметр – прозрачность. Записывается так:

Background-color: rgba(173, 57, 22, 0.5)

Сначала мы явно указываем, что задаем цвет в режиме rgba. Потом указываем значения насыщенности трех основных цветов от 0 до 255, где 255 – наибольшая насыщенность. Четвертый параметр это и есть наша прозрачность. Здесь пишется значение от 0 до единицы. 1 – полностью непрозрачный элемент, а 0 – полностью прозрачный. Соответственно, если выставить 0, то фонового цвета не будет видно вообще.

Теперь вы знаете, как в css у свойства background задать прозрачность. Для этого нужно использовать цветовой режим rgba. Есть еще свойство opacity , но оно применяется ко всему элементу в целом. То есть при применении opacity прозрачность может примениться и к тексту, что сделает его нечитаемым.

Прозрачный фон на примере

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

А теперь зададим этот же черный цвет блоку, но укажем его с помощью цветового формата rgba, указав последнее значение в 0.7, например. Получится так:
Теперь фон блока просвечивается и через него видно фоновую картинку. Данная картинка и фон приведены лишь для примера. Как вы понимаете, в css background прозрачность может пригодиться, когда вам надо, чтобы фон вложенного элемента просвечивался, не закрывая другие фоны, расположенные в других слоях.

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

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

Для создания эффекта прозрачности в CSS используется свойство opacity.

Браузер IE8 и более ранние его версии поддерживают альтернативное свойство &#8211; filter:alpha(opacity=x), где &#8220;x&#8221; может принимать значение от 0 до 100, чем меньше значение, тем прозрачнее будет элемент.

Все остальные браузеры поддерживают стандартное CSS свойство opacity, которое может принимать в качестве значения числа от 0.0 до 1.0, чем меньше значение, тем прозрачнее будет элемент:

Курсы по CSS (в открытом доступе)

Метод 1. Использование абсолютного позиционирования и изображения

Название этого метода описывает его содержание. Вы просто используете абсолютное позиционирование для нормального тега img и делаете его таким, как если бы вы использовали свойство CSS background-image. Для этого достаточно поместить изображение в контейнер position: relative;. Вот так обычно выглядит разметка HTML:

<div <h1>Hello World!</h1> <img src=&#8221;https://assets.digitalocean.com/labs/images/community_bg.png&#8221;></div>

Вот так выглядит код CSS:

Здесь важно обеспечить абсолютное позиционирование изображения и растянуть его так, чтобы оно заполнило весь родительский контейнер. При этом важно относительное позиционирование всех элементов, чтобы вы могли установить индекс z-index, поднимающий их над изображением.

Ниже приведена демонстрация:

community_bg.png

Свойства фона html-элементов

1. Базовый цвет: свойство background-color

Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.

Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.

Свойство не наследуется.

background-color
Значения:
цвет Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-color: salmon;background-color: #00ff00;background-color: rgba(255, 128, 128, 0.5);background-color: currentColor;background-color: transparent;background-color: inherit;background-color: initial;background-colorРис. 1. Свойство background-color для разных элементов

2. Источник изображения: свойство background-image

Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.

Семантически важные изображения должны предоставляться в разметке документа, например, с тегом <img>.

Свойство не наследуется.

background-image
Значения:
изображение Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none.
inherit Наследует значение свойства от родительского элемента.

background-image: none;background-image: url(http://site.ru/rose.png);background-image: url(tl.png), url(tr.png);background-image: linear-gradient(white, gray);background-image: repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%);background-image: image(&#8220;sprites.svg#xywh=40,0,20,20&#8221;);background-image: inherit;

3. Укладка изображений: свойство background-repeat

Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.

Свойство не наследуется.

background-repeat
Значения:
repeat-x Изображение повторяется в горизонтальном направлении. Вычисляется в repeat no-repeat.
repeat-y Изображение повторяется в вертикальном направлении. Вычисляется в no-repeat repeat.
repeat Изображение повторяется в обоих направлениях так часто, чтобы покрыть область отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется в repeat repeat. Значение по умолчанию.
space Изображение повторяется столько раз, сколько оно помещается в области фона, не обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и последнее изображения касаются краев области. Если область рисования фона больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить область рисования фона. Если недостаточно места для двух копий изображения, то размещается только одно изображение, а свойство background-position определяет его положение. Вычисляется в space space.
round Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь и не обрезаясь. Вычисляется в round round.
no-repeat Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repeat.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: repeat;​​​​​​​background-repeat: space;​​​​​​​background-repeat: round;​​​​​​​background-repeat: no-repeat;background-repeat: repeat space;background-repeat: repeat repeat;background-repeat: round space;background-repeat: no-repeat round;background-repeat: inherit;background-repeat: initial;13Рис. 2. Свойство background-repeat

4. Фиксация изображения: свойство background-attachment

Свойство background-attachment указывает, является ли фоновое изображение фиксированными относительно области просмотра или прокручивается вместе с элементом или его содержимым.

Свойство не наследуется.

background-attachment
Значения:
scroll Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию.
fixed Предотвращает перемещение, фиксирует фоновое изображение на заднем плане.
local Фоновое изображение прокручивается вместе с содержимым элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-attachment: scroll;background-attachment: fixed;background-attachment: local;background-attachment: inherit;background-attachment: initial;

5. Позиционирование изображений: свойство background-position

Если для элемента заданы фоновые изображения, свойство background-position указывает их начальное положение (после любого изменения размера) в соответствующей области расположения фона.

Свойство не наследуется.

background-position
Значения:
% Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона &#8211; высота фонового изображения, где размер изображения — это размер, заданный свойством background-size. Значение по умолчанию 0% 0%.
длина Значение длины дает фиксированную длину в качестве смещения.
left Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края.
center Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано.
right Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края.
top Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края.
bottom Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-position: top;background-position: bottom;background-position: left;background-position: right;background-position: center;background-position: 25% 75%;background-position: 0 0;background-position: 1cm 2cm;background-position: 10ch 8em;background-position: 0 0, center;background-position: bottom 10px right 20px;background-position: right 3em bottom 10px;background-position: bottom 10px right;background-position: top right 10px;background-position: inherit;background-position: initial;

Если указано только одно значение, второе значение считается center. Если заданы два значения в единицах длины или %, то первое значения представляет горизонтальную позицию, второе — вертикальную. Значения в единицах длины или % представляют смещение верхнего левого угла фонового изображения от верхнего левого угла области расположения фона.

Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.

Если заданы три или четыре значения в единицах длины или %, то перед каждым значением должно стоять ключевое слово, которое указывает, от какого края дается смещение. Если даны три значения, недостающее смещение считается равным нулю.

Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.

15Рис. 3. Свойство background-position

Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:

div background_repeat_bottomРис. 4. Фоновое изображение по низу блока

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

div 16Рис. 5. Задание для блока нескольких фоновых изображений

6. Область рисования: свойство background-clip

Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.

Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.

Свойство не наследуется.

background-clip
Значения:
border-box Фон закрашивает область в пределах рамки элемента. Значение по умолчанию.
padding-box Фон закрашивает область в пределах внутренних полей элемента.
content-box Фон закрашивает только область содержимого.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-clip: border-box;background-clip: padding-box;background-clip: content-box;background-clip: text;background-clip: inherit;background-clip: initial;12Рис. 6. Свойство background-clip

7. Область расположения фона: свойство background-origin

Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).

Свойство не наследуется.

background-origin
Значения:
padding-box Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию.
border-box Фон позиционируется относительно верхних границ рамки элемента.
content-box Фон позиционируется относительно верхних границ области содержимого элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-origin: border-box;background-origin: padding-box;background-origin: content-box;background-origin: inherit;background-origin: initial;

Если для элемента установлено background-attachment: fixed, свойство не будет иметь эффекта.

Если для элемента заданы background-clip: padding-box, background-origin: border-box, background-position: top left, и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.

background-originРис. 7. Свойство background-origin

8. Размер изображений: свойство background-size

Свойство background-size устанавливает размер фоновых изображений.

Свойство не наследуется.

background-size
Значения:
auto Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам.
длина Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em.
% Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном.
cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-size: cover;background-size: contain;background-size: 50%;background-size: 3.2em;background-size: 12px;background-size: auto;background-size: 50% auto;background-size: 3em 25%;background-size: auto 6px;background-size: auto auto;background-size: auto, auto; background-size: 50%, 25%, 25%;background-size: 6px, auto, contain;background-size: inherit;background-size: initial;14Рис. 8. Свойство background-size

9. Краткая запись свойств фона: свойство background

Свойство background позволяет описать в одном объявлении следующие свойства фона: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip и background-attachment. Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.

Если вы указываете в краткой записи фона свойство background-size, то его значения нужно будет записать через слеш /, чтобы отделить его от свойства background-position.

background: gold;background: url(&#8220;rose.png&#8221;) repeat-y;background: border-box red;background: no-repeat center/80% url(&#8220;../img/icon.png&#8221;);

10. Множественные фоны

Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image. Значение none по-прежнему создает слой.

Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.

backgroundsРис. 9. Пример использования нескольких фоновых изображений

По материалам CSS Backgrounds and Borders Module Level 3

Применение

Управляйте непрозрачностью цвета фона элемента с помощью утилит bg-opacity-.

Фон из PNG изображения

Сначала необходимо создать полупрозрачный фоновый рисунок в графическом редакторе, а потом сохранить его в формате PNG-24. После этого просто применяем свойство background-image.
Пример кода:

Этот метод плохо работает в InternetExplorer версии 6 и ниже. Чтобы реализовать прозрачность PNG, необходимо воспользоваться специальными скриптами. Этот способ имеет некоторые ограничения:

  1. Если в браузере отключить картинки, фоновое изображение пропадет.
  2. Если требуется изменить прозрачность фона, придется переделать картинку.
  3. Нельзя менять прозрачность методами JS. Также невозможно к такому фону применять анимацию, напрямую изменяющую прозрачность.

Opacity changes on a parent will get inherited to child elements.

For example, let’s say you have a div element with some text inside, and you have set the background-image on the parent .hero element.

Then you adjust the opacity of the parent to try to make the background image semi-transparent, like this:

Opacity is automatically inherited by child elements, so when you adjust the opacity of the parent element, it will affect all child elements in that parent layer. (This is similar to how z-index is also inherited.)

So you will end up with all the elements, both background image and text, having that reduced opacity.

Background image in the parent with reduced opacity affecting the text

Definitely not what we want to see!

Клетчатое изображение

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

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

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

Возможно вы уже знакомы с моделью представления цвета в формате RGB. RGB (Red, Green, Blue &#8211; красный, зеленый, синий) &#8211; цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:

color: rgb(255,255,0);color: rgb(100%,100%,0);

Цвета, заданные с помощью RGB, будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.

Объявление цвета RGBA схоже по синтаксису со стандартными правилами RGB. Однако, кроме всего прочего, нам потребуется объявить значение как RGBA (вместо RGB) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).

color: rgba(255,255,0,0.5);color: rgba(100%,100%,0,0.5);

Разница между свойством opacity и RGBA заключается в том, что свойство opacity применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А RGBA позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *