Background в CSS (color, position, image, repeat, attachment) — все для задания цвета фона или фоновой картинки Html элементов

способ: Удаляем фон при помощи инструмента «Магнитное лассо»:

5-6.jpg—> —>

background-image

С помощью этого свойства в качестве фона для сайта можно поставить изображение. Указывая значения других свойств, можно изменять его размер, определять место на странице и повторять как в горизонтальном, так и в вертикальном направлении. Указателем на рисунок в таблице является путь к файлу-изображению, который записывается с помощью конструкции url. Следует помнить, что тег img, в отличие от свойства image, является частью языка html.

See the Pen by Андрей (@adlibi) on CodePen.

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

Способ №2

Этот способ немного сложнее, чем предыдущий и потребует от вас немного усидчивости. В том варианте мы будем использовать инструмент «Магнитное лассо».

1-png.png

  • В столбце с инструментами нажимаем на «Лассо» и перед вами откроются три варианта. Выбираем именно магнитное лассо.

2-png.png

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

Совет! Этим способом лучше пользоваться, если картинка изображена на белом фоне!

background-position

Дает возможность установить точное местоположение фонового изображения и использует два значения, указывающих координаты по горизонтали и вертикали и записываемых через пробел. Свойство background-position позволяет применять различные способы – названия сторон элемента (left, right, top, bottom, center), проценты, миллиметры, пиксели.

Значение по умолчанию – 0, то есть левый верхний угол изображения помещается в левый верхний угол элемента.

На примере изображение сдвинуто вправо на 20px и вниз на 40px;

See the Pen by Андрей (@adlibi) on CodePen.

Атрибут 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.

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

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий