Фон и границы

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

Необходимые умения: Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML) и представление о том, как работает CSS (смотрите Введение в CSS).
Задача: Научиться стилизации фона и границ объектов.

Стилизация фона

Свойство CSS background — это сокращённая запись ряда других свойство, которые мы рассмотрим в этом уроке.Если Вы встретите сложное свойство background, то будет достатчно тяжело понять, что там написано.

.box { 
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, 
  url(big-star.png) center no-repeat, rebeccapurple; 
} 

Как сокращать записи, мы ещё рассмотрим позже, а пока рассмотрим каждое свойство по отдельности.

Фоновый цвет

Свойство background-color определяет цвет элемента в CSS. Оно поддерживает каждый действительный цвет <color>background-color разделяет содержимое блока от отступов (padding).

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

Поупражняйтесь, используя свойства <color>.

Фоновое изображение

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

Пример демонстрирует две особенности этого свойства. По умолчанию большое изображение не уменьшено, поэтому мы видим лишь уголок его, в то время как маленькое изображение растянуто, чтобы заполнить блок. (Вообще, на изображении всего одна звезда.)

Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом. Попробуйте добавить свойство background-color в примере выше.

Свойство  background-repeat

Свойство background-repeat контролирует повторение фона. Доступны значения:

  • no-repeat — остановить повторение фона.
  • repeat-x — повторение по горизонтали.
  • repeat-y — повторение по вертикали.
  • repeat — повторение в обоих направлениях. Установлено по умолчанию.

Добавьте эти значения в пример ниже. Мы поставили no-repeat, так что Вы увидите одну звезду.

Изменение размеров фонового изображения

В одном из примеров мы встретили изображение, которое было обрезано: оно слишком большое. В подобных случаях мы можем использовать свойство background-size, принимающее значения процентные или длины, чтобы изображение помещалось в блоке.

Вы можете использовать ключевые слова:

  • cover — браузер изменит размеры изображения, чтобы оно заполнило размеры блока, но сохраняя пропорции.
  • contain — изображение целиком заполнит блок. При этом пропорции не будут соблюдены

Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.

Попробуйте следующее.

  • Измените значения длины.
  • Измените значение длины на background-size: cover или background-size: contain.
  • Если изображение меньше размеров блока, попробуйте добавить background-repeat.

Позиционирование фонового изображения

Свойство background-position позволяет настраивать позицию, на которой появится фоновое изображение в блоке. Используется система координат, в которой левый верхний угол блока находится на (0,0) и сам блок располагается вдоль осей абсцисс (x)  и ординат (y).

Примечание: По умолчанию значение background-position равно (0,0).

Вы можете использовать ключевые слова, например top и right (остальные смотрите на странице background-image):

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: top center; 
} 

Допустимы значения длины и процентные:

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: 20px 10%; 
} 

Вы можете сочетать различные значения:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}

И наконец, Вы можете записывать четырёхзначные значения, чтобы настраивать расстояние от конкретных сторон: значение длины будет относиться к ключевму слову. В примере ниже мы сместили фон на 20px от верхнего и на 10px от правого краёв:

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: top 20px right 10px; 
} 

Попробуйте сместить звезду внутри блока.

Примечание: background-position — это сокращение свойств background-position-x и background-position-y.

Градиент в качестве фона

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

Больше о градиентах Вы можете узнать на странице <gradient>. Вы можете поиграться с градиентами на разных генераторах CSS-градиентов, как этот. Создав градиент, его можно скопировать и вставить в свой код.

Несколько фоновых изображений

Также возможно создавать несколько фоновых изображений — просто разделив значения свойства background-image запятыми. В таком случае изображения могут накладываться друг на друга.

Примечание: Градиенты можно удачноиспользовать вместе с изображениями.

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

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

Значения свойств будут совпадать со значениями свойств, расположенных на той же позиции. Однако что если несколько свойств имеют разное число свойств? Ответ в том, что меньшее число значений войдет в цикл — в примере выше есть четыре фоновых изображения, но только два значения background-position. Первые два значения будут применены к первым двум изображениям, then they will cycle back round again — image3 will be given the first position value, and image4 will be given the second position value.

Let's play. In the example below I have included two images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.

Дополнение

Another option we have available for backgrounds is specifying how they scroll when the content scrolls. This is controlled using the background-attachment property, which can take the following values:

  • scroll: Causes the element's background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.
  • fixed: Causes an element's background to be fixed to the viewport, so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.
  • local: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the scroll value is rather confusing and doesn't really do what you want in many cases. The local value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.

The background-attachment property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).

Сокращенное свойство background

As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the background property. This shorthand lets you set all of the different properties at once.

If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with no-repeat and a position, then a color.

There are a few rules that need to be followed when writing background image shorthand values, for example:

  • A background-color may only be specified after the final comma.
  • The value for background-size may only be included immediately after background-position, separated with the '/' character, like this: center/80%.

Take a look at the MDN page for background to see all of the considerations.

Доступность просмотра

When placing text on top of a background image or color, you should take care that you have enough contrast for the text to be legible for your visitors. If specifying an image, and text will be placed on top of that image, you should also specify a background-color that will allow the text to be legible if the image does not load.

Screen readers cannot parse background images, therefore they should be purely decoration; any important content should be part of the HTML page and not contained in a background.

Границы

When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.

We can set a border for all four sides of a box with border:

.box { 
  border: 1px solid black; 
} 

Or we can target one edge of the box, for example:

.box { 
  border-top: 1px solid black; 
} 

The individual properties for these shorthands would be:

.box { 
  border-width: 1px; 
  border-style: solid; 
  border-color: black; 
} 

And for the longhands:

.box { 
  border-top-width: 1px; 
  border-top-style: solid; 
  border-top-color: black; 
} 

Note: These top, right, bottom, and left border properties also have mapped logical properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers handling different text directions.

There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.

Скругление углов

Rounding corners on a box is achieved by using the border-radius property and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.

For example, to make all four corners of a box have a 10px radius:

.box { 
  border-radius: 10px; 
} 

Or to make the top right corner have a horizontal radius of 1em, and a vertical radius of 10%:

.box { 
  border-top-right-radius: 1em 10%; 
} 

We have set all four corners in the example below, and then changed the values for the top right corner to make it different. You can play with the values to change the corners. Take a look at the property page for border-radius to see the available syntax options.

Упражнение с границами и фоном

To test out your new knowledge try to create the following using backgrounds and borders, using the example below as a starting point:

  1. Give the box a 5px black solid border, with rounded corners of 10px.
  2. Add a background image (use the URL balloons.jpg) and size it so that it covers the box.
  3. Give the <h2> a semi-transparent black background color, and make the text white.

Note: You can take a look at the solution here — but try to figure it out yourself first!

Итоги

We have covered quite a lot here, and you can see that there is quite a lot to adding a background or a border to a box. Do explore the different property pages if you want to find out more about any of the features we have discussed. Each page on MDN has more examples of usage for you to play with and enhance your knowledge.

In the next lesson we will find out how the Writing Mode of your document interacts with your CSS. What happens when text does not flow from left to right?

В этом модуле

  1. Каскад и наследование
  2. CSS-селекторы
  3. Блоки в CSS
  4. Фон и границы
  5. Изменение направления текста
  6. Перекрытие содержимого
  7. Значения свойств CSS
  8. Изменение размеров в CSS
  9. Изображения, формы и прочие медиа-элементы
  10. Стилизация таблиц
  11. Отладка CSS
  12. Организация CSS-кода