belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

4.2. Установка фона

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

Цвет фона определяется при помощи ненаследуемого свойства background-color, которое принимает те же значения цвета, что и свойство color (смотреть). Также в качестве фона разрешается использовать изображения. Для этого нужно использовать свойство background-image, которое в качестве значений принимает путь к одному или нескольким файлам изображений, перечисляемых через запятую в формате {background-image: url("path_1"), url("path_2"), ...}, где путь, опять же, можно писать как в кавычках, так и без них. Если фоновых изображений указывается несколько, то приоритет будет отдаваться первым из них, т.е. изображения, указанные впереди, будут располагаться выше остальных в порядке своего перечисления в значении свойства. Отметим, что в качестве значения может использоваться ключевое слово none, которое отменяет установку фона. Браузеры используют это значение по умолчанию, а также в случае, если фоновое изображение по каким-либо причинам не может быть загружено. Для исключения таких ситуаций разрешается одновременное использование свойств background-color и background-image. В этом случае фон будет отображаться до момента полной загрузки фонового изображения или вместо него из-за невозможности установки изображения в качестве фона элемента.

Использование свойств background-color, background-image показано в примере 4.2.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		width: 300px;
		border: solid 2px;
		background-color: yellow;
		}
		.background_2{
		width: 300px;
		height: 200px;
		border: solid 2px green;
		background-color: #0000ff;
		background-image: 
	url("css_textbook_4_examples/balls_2015.jpg");
		}
	</style>
</head>
<body>
	<p class="background_1">
		Данный абзац имеет желтый фон.
	</p>
	
	<p class="background_2">
		По умолчанию фоновое изображение располагается браузером в левом
		верхнем углу и затем повторяется по вертикали и горизонтали. 
		Если изображение не будет загружено, то будет использован синий фон, 
		заданный в свойстве background-color.
	</p>
</body>
</html>

Пример 4.2. Установка фона элемента

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

Отметим, что допустимо указывать через пробел сразу два значения: первое ключевое слово задаёт повторение по горизонтали, второе – по вертикали. При этом ключевыми словами не должны быть repeat-x или же repeat-y.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		width: 310px;
		height: 100px;
		border: solid 2px red;
		background-color: yellow;
		background-repeat: repeat-x;
		background-image: 
	url("css_textbook_4_examples/cabinet.png");
		}
		.background_2{
		width: 310px;
		height: 100px;
		border: solid 2px green;
		background-repeat: no-repeat round;
		background-image: 
	url("css_textbook_4_examples/cabinet.png");
		}
	</style>
</head>
<body>
	<p class="background_1">	</p>
	
	<p class="background_2">	</p>
</body>
</html>

Пример 4.3. Использование свойства background-repeat

Чтобы указать браузеру, где ему следует разместить фоновое изображение, следует использовать ненаследуемое свойство background-position, которое определяет начальное положение фонового изображения (см. пример 4.4). Свойство может принимать как одну пару значений (или одиночное значение), так и несколько пар значений (или одиночных значений), разделяемых запятой для каждого изображения, указанного в значении свойства background-image:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		width: 400px;
		height: 80px;
		border: solid 2px red;
		background-color: yellow;
		background-repeat: no-repeat;
		background-image: 
	url("css_textbook_4_examples/cabinet.png");
		}
		
		.background_2{background-position: 30px 60%;}
		.background_3{background-position: 80% 2em}
		.background_4{background-position: center bottom;}
	</style>
</head>
<body>
	<p class="background_1 background_2">30px 60%;</p>
	<p class="background_1 background_3">80% 2em</p>
	<p class="background_1 background_4">center bottom</p>
</body>
</html>

Пример 4.4. Использование свойства background-position

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		width: 400px;
		height: 80px;
		border: solid 2px red;
		background-color: yellow;
		background-repeat: no-repeat;
		background-image: 
	url("css_textbook_4_examples/balls_2015.jpg");
		}
		
		.background_2{background-size: cover;}
		.background_3{background-size: contain}
		.background_4{background-size: 20%;}
	</style>
</head>
<body>
	<p class="background_1 background_2">cover - высота изображения 
	больше его ширины, поэтому по ширине изображение приняло 
	ширину элемента, а по высоте было обрезано по высоте элемента.</p>
	<p class="background_1 background_3">contain - фоновое изображение 
	полностью поместилось в пределах элемента, но часть площади элемента 
	не была покрыта фоновым изображением.</p>
	<p class="background_1 background_4">20% - ширина и высота фонового 
	изображения равны 20% от ширины элемента. </p>
</body>
</html>

Пример 4.5. Использование свойства background-size

Чтобы указать браузеру какую область элемента следует использовать для фона, используется ненаследуемое свойство background-clip, принимающее следующие значения:

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

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

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

Чтобы указать браузеру относительно чего нужно позиционировать фоновое изображение внутри элемента, используется ненаследуемое свойство background-origin (см. пример 4.6), которое не применяется, если значение свойства background-attachment указано, как fixed. Также, если задано свойство background-size, то приоритет будет отдан браузером значению этого свойства. Перечислим значения, принимаемые свойством:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		padding: 10px;
		width: 300px;
		height: 60px;
		border: dotted 6px red;
		background-color: yellow;
		background-repeat: no-repeat;
		background-image: 
	url("css_textbook_4_examples/cabinet.png");
		}
		
		.background_2{background-origin: border-box;}
		.background_3{background-origin: padding-box}
		.background_4{background-origin: content-box}
	</style>
</head>
<body>
	<p class="background_1 background_2">border-box</p>
	<p class="background_1 background_3">padding-box</p>
	<p class="background_1 background_4">content-box </p>
</body>
</html>

Пример 4.6. Использование свойства background-origin

Опять же, в CSS для одновременного определения сразу нескольких характеристик фона присутствует ненаследуемое универсальное свойство background. В качестве значений свойства можно в любом порядке через пробел задать значения свойств background-color, background-image, background-position, background-repeat, background-attachment, background-size, background-origin и background-clip (см. пример 4.7). Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию.

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

Кроме того, свойства background-origin и background-clip имеют одни и те же название ключевых слов, принимаемых в качестве значений. Поэтому в случае, когда в элементе установлены как фоновое изображение, так и фон, браузер будет считать, что заданы оба свойства, выделяя соответствующую область элемента под фон и позиционируя соответствующим образом фоновое изображение. Задавать через пробел или слэш '/' значения обоих свойств не разрешается.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		padding: 10px;
		width: 300px;
		height: 60px;
		border: dotted 6px red;
		}
		.background_2{
		background: #00ff00 fixed padding-box;
		}
		.background_3{
		background: no-repeat #00ff00  content-box 100px 30px/15px 15px
		url("css_textbook_4_examples/cabinet.png");
		}
		.background_4{
		background: no-repeat #00ff00 content-box 
		url("css_textbook_4_examples/cabinet.png");
		}
	</style>
</head>
<body>
	<p class="background_1 background_2">
		#00ff00 fixed padding-box
	</p>
	<p class="background_1 background_3">
		no-repeat #00ff00  content-box <br> 100px 30px/15px 15px url("path")
	</p>
	<p class="background_1 background_4">
		no-repeat #00ff00  content-box url("path")
	</p>
</body>
</html>

Пример 4.7. Использование универсального свойства background

Отдельно отметим, что красивого визуального эффекта фона можно добиться за счет использования функций linear-gradient() и radial-gradient(), которые могут использоваться в качестве значений в свойствах background и background-image и добавляют, соответственно, линейный и радиальный градиент к фону изображения.

Функция linear-gradient() принимает в качестве аргументов угол или ключевое слово, стартовое значение цвета и конечное значение цвета. Например, запись linear-gradient(30deg, #000000, #ffffff) создает линейный градиент цвета от черного к белому вдоль градиентной прямой, которая расположена под углом в 30 градусов относительно вертикальной прямой. Значение угла может быть как положительным (отсчет ведется по часовой стрелке), так и отрицательным (отсчет ведется против часовой стрелки), но после него в любом случае сразу же и без пробела должно записываться обозначение единицы измерения deg (см. пример 4.8). Цвет может быть указан с использованием любой доступной в CSS цветовой модели. Кроме того, разрешается через запятую указывать более двух значений цветов, тогда цвет будет меняться волнами на протяжении всего градиентного направления от одного цвета к другому. Также следует отметить, что вместо значения угла разрешается использовать следующие ключевые слова:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		padding: 10px;
		width: 350px;
		height:100px;
		border: solid 6px red;
		}
		
	.background_2{background: linear-gradient(0deg, #000000, #ffffff);}
	.background_3{background: linear-gradient(to top, #000000, #ffffff);}
	.background_4{background: linear-gradient(225deg, #000000, #ffffff);}
	.background_5{background: linear-gradient(to bottom left, #000000, #ffffff);}
	</style>
</head>
<body>
	<p class="background_1 background_2">
		linear-gradient(0deg, #000000, #ffffff)
	</p>
	<p class="background_1 background_3">
		linear-gradient(to top, #000000, #ffffff)
	</p>
	<p class="background_1 background_4">
		linear-gradient(225deg, #000000, #ffffff)
	</p>
	<p class="background_1 background_5">
		linear-gradient(to bottom left, #000000, #ffffff)
	</p>
</body>
</html>

Пример 4.8. Использование функции linear-gradient()

Функция radial-gradient() в общем случае в качестве аргументов принимает радиусы a и b эллипса, координаты x и y центра эллипса относительно вершины верхнего левого угла элемента и значения цветов с указанием через пробел их горизонтальной позиции относительно центра эллипса. В качестве числовых аргументов могут использоваться любые доступные в CSS единицы измерения, а также проценты. Цвет также может быть указан с использованием любой доступной в CSS цветовой модели.

Рассмотрим в качестве примера конкретное использование функции с указанием всех перечисленных арументов: radial-gradient(150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px). Данная функция создает радиальные градиенты цветов от белого к черному и от черного к серому, которые распространяются от центра эллипса с радиусами 150px по горизонтали и 100px по вертикали. При этом координата x центра равна 50% от ширины элемента, а координата y50% от высоты элемента (повторимся, отсчет координат центра ведется от вершины верхнего левого угла элемента). Величины, которые указаны через пробел после значений цветов, представляют собой позиции соответствующих цветов на горизонтальной градиентной прямой, которые определяют резкость переходов от одного цвета к другому. В нашем примере белый цвет заполняет соответствующую эллиптическую область с горизонтальным радиусом длиной 2px и вертикальным радиусом, длина которого вычисляется браузером автоматически в зависимости от соотношения радиусов a и b, заданных в качестве аргументов функции. Затем происходит радиальный переход цвета от белого к черному, позиция которого находится на расстоянии 30px от центра эллипса на прямой, содержащей горизонтальный радиус нашего эллипса. После чего начинается новый переход от черного цвета к серому, позиция которого расположена на расстоянии 70px от центра эллипса. Остальная площадь элемента, отведенная под фон, если градиентная область не покрывает ее всю, будет залита серым цветом. Внимательно и неторопясь изучите пример 4.9, в котором показано использование функции. Обратите внимание, что рассмотренное нами значение функции было использовано для создания фона первого абзаца.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		padding: 10px;
		width: 460px;
		height:110px;
		border: solid 6px red;
		}
		
	.background_2{background: 
	radial-gradient(150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px);}
	.background_3{background: 
	radial-gradient(150px 100px at 50% 50%, #ffffff, #000000 100px, #dddddd 200px);}
	.background_4{background: 
	radial-gradient(550px 200px at 30% 50px, #ffffff 20%, #000000 70%, #dddddd);}
	.background_5{background: 
	radial-gradient(300px 250px at 40% 100px, #ffffff, #000000, #dddddd);}
	</style>
</head>
<body>
	<p class="background_1 background_2">
		150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px
	</p>
	<p class="background_1 background_3">
		150px 100px at 50% 50%, #ffffff 20px, #000000 60px, #dddddd 100px
	</p>
	<p class="background_1 background_4">
		550px 200px at 30% 50px, #ffffff 20%, #000000 70%, #dddddd
	</p>
	<p class="background_1 background_5">
		300px 250px at 40% 100px, #ffffff, #000000, #dddddd
	</p>
</body>
</html>

Пример 4.9. Использование функции radial-gradient()

Если вместо двух радиусов указать только один, то будет задан градиент круглой формы, а в случае отсутствия значений градиент заполнит всю отведенную под фон область элемента. Вместо радиусов a и b разрешается использовать ключевые слова circle и ellipse. Первое из них задает радиальный градиент круглой формы, а второй используется по умолчанию и задает радиальный градиент эллиптической формы. В случае использования данных ключевых слов размеры эллипса (круга) либо не указываются вообще, либо через пробел используются следующие ключевые слова (см. пример 4.10):

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		padding: 10px;
		width: 300px;
		height: 60px;
		border: solid 6px red;
		}
	.background_2{background: 
	radial-gradient(circle closest-side at 30% 40%, #ffffff, #000000);}
	.background_3{background: 
	radial-gradient(ellipse closest-side at 30% 40%, #ffffff, #000000);}
	.background_4{background: 
	radial-gradient(circle closest-corner at 30% 40%, #ffffff, #000000);}
	.background_5{background: 
	radial-gradient(ellipse closest-corner at 30% 40%, #ffffff, #000000);}
	.background_6{background: 
	radial-gradient(circle farthest-corner at 30% 40%, #ffffff, #000000);}
	.background_7{background: 
	radial-gradient(ellipse farthest-corner at 30% 40%, #ffffff, #000000);}
	
	</style>
</head>
<body>
	<p class="background_1 background_2"></p>
	<p class="background_1 background_3"></p>
	<p class="background_1 background_4"></p>
	<p class="background_1 background_5"></p>
	<p class="background_1 background_6"></p>
	<p class="background_1 background_7"></p>
</body>
</html>

Пример 4.10. Использование ключевых слов в функции radial-gradient()

Вместо координат центра эллипса также разрешается использовать ключевые слова, задающие его расположение:

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

Контрольные вопросы и задания

  1. Какое свойство отвечает за установку цвета фона? Можно ли использовать в качестве фона элемента изображение?
  2. Перечислите значения свойства background-repeat.
  3. Как указать начальную позицию фонового изображения в элементе?
  4. Имеется ли в CSS возможность масштабирования фонового изображения? Если да, то перечислите значения соответствующего свойства.
  5. Как задать для элемента область, которая будет использоваться для фона?
  6. При помощи какого свойства можно управлять поведением фонового изображения при прокрутке страницы или элемента?
  7. Для чего используется свойство background-origin? Перечислите принимаемые им значения.
  8. Можно ли задать сразу несколько характеристик фона в одном свойстве?
  9. Для чего используются функции linear-gradient() и radial-gradient()? Опишите их.

Словарь новых английских слов

transparent [tranˈspar(ə)nt] – прозрачный, просвечивающийся.
repeat [rɪˈpiːt] – повторять.
cover [ˈkʌvə] – покрывать, накрывать, прятать.
contain [kənˈteɪn] – вмещать, содержать.
fixed [fɪkst] – неподвижный, закрепленный.
scroll [skrəʊl] – прокрутить, прокрутка.
local [ˈləʊk(ə)l] – местный, локальный.
origin [ˈɒrɪdʒɪn] – источник, начало, исходная точка.
attachment [əˈtatʃm(ə)nt] – прикрепление, привязанность.
clip [klɪp] – урезать, обрезать.
linear [ˈlɪnɪə] – линейный.
radial [ˈreɪdɪəl] – радиальный, лучевой.
gradient [ˈɡreɪdɪənt] – градиент, уклон.
closest [ˈkləʊsɪst] – ограниченный, закрытый.
farthest [ˈfɑːðɪst] – самый удаленный.
side [saɪd] – стенка, сторона.
corner [ˈkɔːnə] – угол.
duration [djʊˈreɪʃ(ə)n] – продолжительность, длительность.
delay [dɪˈleɪ] – задержка, отсрочка.
iteration [ɪtəˈreɪʃ(ə)n] – повтор, итерация.
count [kaʊnt] – счет, подсчет, итог.
infinite [ˈɪnfɪnɪt] – бесконечный.
direction [dɪˈrɛkʃ(ə)n] – направление.
alternate [ɔːlˈtɜːnət] – чередоваться, колебаться.
reverse [rɪˈvəːs] – направленный в обратную сторону.
ease [iːz] – легкость, свобода.
step [step] – шаг.
end [end] – конец.
state [steɪt] – состояние, положение.
running [ˈrʌnɪŋ] – бегущий.
paused [pɔːzd] – поставленный на паузу.
backwards [ˈbakwədz] – назад, в обратном направлении.
forward [] – вперед, дальше.
both [bəʊθ] – оба.
property [ˈprɒpəti] – свойство.
transition [tranˈzɪʃ(ə)n] – переход.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх