Изображения. Фоны Продолжение

Содержание

Слайд 2

BACKGROUND-COLOR

transparent
Устанавливает прозрачный фон.

BACKGROUND-COLOR transparent Устанавливает прозрачный фон.

Слайд 3

BACKGROUND-IMAGE

background-image: url(путь к файлу) | none
Устанавливает фоновое изображение для элемента. Если одновременно

BACKGROUND-IMAGE background-image: url(путь к файлу) | none Устанавливает фоновое изображение для элемента.
для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.

Слайд 4

BACKGROUND-ATTACHMENT 

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

BACKGROUND-ATTACHMENT устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Значения
элемента неподвижным.
scroll
Позволяет перемещаться фону вместе с содержимым.

Слайд 5

BACKGROUND-POSITION

Задает начальное положение фонового изображения, установленного с помощью свойства background-image.
background-position: 100% 100%;
Возможно использование

BACKGROUND-POSITION Задает начальное положение фонового изображения, установленного с помощью свойства background-image. background-position:
значений top, right, bottom, left, center

Слайд 6

BACKGROUND-REPEAT

Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства 
background-repeat: no-repeat |

BACKGROUND-REPEAT Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-repeat:
repeat | repeat-x | repeat-y

Слайд 7

background-size

Размеры фонового изображения.
Задаётся в пикселях, процентах и значениями cover и contain
cover -

background-size Размеры фонового изображения. Задаётся в пикселях, процентах и значениями cover и
фоновое изображение растянется максимально, не изменив пропорции.
contain - фоновое изображение закроет размеры элемента, не изменив пропорции.

Слайд 8

background-clip

Указывает, каким именно образом будет распределяться фон.
Возможные значения:
border-box - фон распространяется до

background-clip Указывает, каким именно образом будет распределяться фон. Возможные значения: border-box -
внешнего края границы
padding-box - фон распространяется до внешнего края отступа. Под границей фон не рисуется.
content-box - фон закрашивается внутри (обрезается) поля содержимого.

Слайд 9

background

Краткая запись всех свойств, связанных с фоном.
background: background-color || background-image || background-position/background-size

background Краткая запись всех свойств, связанных с фоном. background: background-color || background-image
|| background-repeat || background-attachment || background-clip

Слайд 10

ИСПОЛЬЗОВАНИЕ СПРАЙТОВ

https://spritegen.website-performance.org/

ИСПОЛЬЗОВАНИЕ СПРАЙТОВ https://spritegen.website-performance.org/

Слайд 11

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

CSS позволяет задавать несколько фонов через запятую. Первый указанный фон будет

Множественные фоны CSS позволяет задавать несколько фонов через запятую. Первый указанный фон
верхним, последний - нижним.
Если нужно задать фон различными свойствами, то там значения тоже задаются через запятую.
Важный момент: фоновый цвет указывается только для последнего фона.
Имя файла: Изображения.-Фоны-Продолжение.pptx
Количество просмотров: 36
Количество скачиваний: 0