Сегодня поговорим про такое свойство как Background-оно предназначено для изменения фона.
- Это универсальное CSS свойство позволяет одновременно задать несколько параметров фона, а именно определить цвет, установить фоновое изображение, задать начальное положение фонового изображения, определить как будет повторяться фоновое изображение, установить будет ли прокручиваться фоновое изображение вместе с содержимым и масштабировать фоновое изображение согласно заданным размерам. Так же значением свойства background может быть указана градиентная заливка фона.
Background-color- определяет цвет фона элемента.
По умолчанию цвет фона всегда белый.(прозрачный)
CSS
.block{
background: transparent;
}
Можно записывать так или вот так
.block{
background-color: transparent;
}
Разницы нет ни какой так так будет правильно.
Таже фону можно задать любой цвет
css
.block{
background-color: # 00FFFF
}
Можно задавать цвет (RGB)
.block{
background-color: rgb(24,181,164);
}
Или цвет (RGBA)
.block{
background-color: rgba(24,181,164,0.5);
}
Следующие свойство Background-image позволяет задать фоновое изображение или градиент.
Вставить картинку
CSS
block{
background-image: url('img/background/avatar.jpg');
}
Для того чтобы вставить картинку нужно создать отдельную папку с картинками для вашей работы.
Залить фон градиентом
CSS
.block{
/* Old browsers */background-color: rgb(236,232,157);/* FF3.6-15 */background-image: -moz-linear-gradient(top, rgba(236,232,157,1) 0%, rgba(94,83,115,1) 50%, rgba(24,181,164,1) 100%);/* Chrome10-25,Safari5.1-6 */background-image: -webkit-linear-gradient(top, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */background-image: linear-gradient(to bottom, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);
}
Вы не пугаетесь для того чтобы залить фон градиентом есть сайт который поможет вам написать код. Вот ссылка ColorZilla.
Заливка радиальным градиентом
CSS
.block{
/* Old browsers */background-color: rgb(236,232,157);/* FF3.6-15 */background-image: -moz-radial-gradient(center, ellipse cover, rgba(236,232,157,1) 0%, rgba(94,83,115,1) 50%, rgba(24,181,164,1) 100%);/* Chrome10-25,Safari5.1-6 */background-image: -webkit-radial-gradient(center, ellipse cover, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */background-image: radial-gradient(ellipse at center, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);
}
Для этого вам тоже поможет ColorZilla.
Следующие свойство Background-repeat определяет как будет повторятся изображение.
repeat фоновое изображение повторяется во вертикале и горизонтали.
CSS код
block{
background-image: url('img/background/avatar.jpg');
background-repeat: repeat;
}
или так
.block{
background: url('img/background/avatar.jpg') repeat;
}
no-repeat устанавливает одно изображение без повторений.
CSS
.block{
background-image: url('img/background/avatar.jpg');
background-repeat: no-repeat;
}
Или так
.block{
background: url('img/background/avatar.jpg') no-repeat;
}
repeat-x фоновое изображение повторяется только по горизонтали.
CSS код
.block{
background-image: url('img/background/avatar.jpg');background-repeat: repeat-x;
}
Или так
.block{
background: url('img/background/avatar.jpg') repeat-x;
}
repeat-y фоновое изображение повторяется только по вертикали.
CSS код
.block{
background-image: url('img/background/avatar.jpg');background-repeat: repeat-y;
}
Или так
.block{
background: url('img/background/avatar.jpg') repeat-y;
}
spacе-изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.
CSS код
.block{
background-image: url('img/background/avatar.jpg');background-repeat: space;
}
иди так
.block{
background: url('img/background/avatar.jpg') space;
}
round-изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.
CSS код
.block{
background-image: url('img/background/avatar.jpg');background-repeat: round;
}
Или так
.block{
background: url('img/background/avatar.jpg') round;
}
На этом закончим. В следующей статье ещё поговорим background.