Компьютерапия

Справочная информация CSS

Категория: Основы CSS
Просмотров: 2263

В этой статье поговорим о том, как установить фоны различных элементов HTML. Вы можете установить следующие свойства фона элемента:

  • Свойство background-color используется для установки цвета фона элемента.
  • Свойство background-image используется для установки фонового изображения элемента.
  • Свойство background-repeat используется для управления повторением изображения в фоновом режиме.
  • Свойство background-position используется для управления положением изображения в фоновом режиме.
  • Свойство background-attachment используется для управления прокруткой изображения в фоновом режиме.
  • Свойство background используется в качестве сокращения, чтобы указать ряд других свойств фона.

Установка цвета фона

Ниже приведен пример, показывающий, как установить цвет фона для элемента.

< html>
   < head>
   < body>
      < p style = "background-color:yellow;">
     Этот текст имеет желтый цвет фона.</p>
   < /body>
   < /head>
< html>

Это приведет к следующему результату -

Установка фонового изображения

Мы можем установить фоновое изображение, вызвав локальные сохраненные изображения, как показано ниже.

< html>
   < head>
      < style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      < /style>
      < body>
         < h1> Привет мир!< /h1>
      < /body>
   < /head>
< html>

Это приведет к следующему результату -

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

В следующем примере показано, как повторить фоновое изображение, если изображение мало. Вы не можете использовать no-repeat значение для background-repeat свойства, если вы не хотите, чтобы повторилось изображение, в этом случае изображение будет отображаться только один раз.

По умолчанию свойство background-repeat будет иметь значение repeat.

< html>
   < head>
      < style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      < /style>
   < /head>
   < body>
      < p>Tutorials point< /p>
   < /body>
< /html>

Это приведет к следующему результату -

Следующий пример демонстрирует, как повторять фоновое изображение по вертикали.

< html>
   < head>
      < style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      < /style>
   < /head>
   < body>
      < p>Tutorials point< /p>
   < /body>
< /html>

Это приведет к следующему результату -

repeat-y будет повторять фоновое изображение только по вертикали.

В следующем примере показано, как воспроизводить фоновое изображение по горизонтали.

< html>
   < head>
      < style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      < /style>
   < /head>
   < body>
      < p>Tutorials point< /p>
   < /body>
< /html>

Это приведет к следующему результату -

repeat-x будет повторять фоновое изображение только по горизонтали.

Установка положение фонового изображения

В следующем примере показано, как установить положение фонового изображения на 100px с левой стороны.

< html>
   < head>
      < style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      < /style>
   < /head>
   < body>
      < p>Tutorials point< /p>
   < /body>
< /html>

Это приведет к следующему результату -

Помещение фонового изображения в определенную позицию.

В следующем примере показано, как установить положение фонового изображения на 100px с левой стороны и на 200px вниз.

< html>
   < head>
      < style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      < /style>
   < /head>
   < body>
      < p>Tutorials point< /p>
   < /body>
< /html>

Это приведет к следующему результату -

Фоновое положение помещается в шкалу 100px и 200px.

Установка фонового вложения

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

В следующем примере показано, как установить фиксированное фоновое изображение.

< html>
   < head>
     < style>
         body  {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      < /style>
      
   < /head>
   < body>
   
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      
   < /body>
< /html>

Это приведет к следующему результату -

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

В следующем примере показано, как установить прокручиваемое фоновое изображение.

< html>
   < head>
  
      < style>
         body  {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }.
      < /style>
     
   < /head>
   < body>
  
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
      < p>The background-image is fixed. Try to scroll down the page.< /p>
     
   < /body>
< /html>

Это приведет к следующему результату -

Если вы не видите полосы прокрутки, попробуйте изменить размер окна браузера

Сокращенное описание

Вы можете использовать свойство background, чтобы сразу установить все свойства фона. Например, 

< p style="background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
< /p>



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok