Руководство CSS Backgrounds

View more Tutorials:

1- CSS Background Overview

CSS предоставляет некоторые свойства (property) помогают вам определить эффекты для фона (background) элемента, которыми являются:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

2- CSS background-color

CSS background-color используется для настройки фонового цвета элемента.
/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
Использование функции  RGBA помогает вам создать цвет с прозрачностью (opacity). вы можете использовать данный цвет для фонового цвета (background color) элемента.Данная прозрачность работает только с фоном (background) элемента, она не влияет на содержание элемента и подэлемента.
<div style="background-color: rgba(76, 175, 80, 0.1);">
     {background-color: rgba(76, 175, 80, 0.1);}
</div>
<div style="background-color: rgba(76, 175, 80, 0.3);">
     {background-color: rgba(76, 175, 80, 0.3);}
</div>
<div style="background-color: rgba(76, 175, 80, 0.6);">
     {background-color: rgba(76, 175, 80, 0.6);}
</div>
<div style="background-color: rgba(76, 175, 80);">
    {background-color: rgba(76, 175, 80);}
</div>
Например создайте почти прозрачное окно содержащее тект, которое описывает изображение.
background-color-grba-example2.html
<!DOCTYPE html>
<html>
<head>
    <title>CSS background-color</title>
    <meta charset="UTF-8"/>
    <style>
       .img-container {
          display: inline-block;
          position: relative;
       }
       .img-desc {
          position: absolute;
          left: 5px;
          right: 5px;
          bottom: 15px;
          padding: 5px;
          text-align: center;
          background-color: rgba(76, 175, 80, 0.3);
          color: white;
       }
    </style>
</head>
<body>
    <h3>CSS background-color with GRBA function</h3>

    <div class = "img-container">
       <img src="../images/image.png" width="320" height="178"/>
       <div class="img-desc">
          This is an Image
       </div>
    </div>
    <p style="font-style: italic;">
       { background-color: GRBA(76, 175, 80, 0.3); }
    </p>

</body>
</html>
Смотрите так же:
  • TODO Link!

3- CSS background-image

CSS background-image используется для настройки одного или многих фоновых изображений (background images) для элемента.
div {
  padding: 5px;
  margin-top: 10px;
  border: 1px solid #ddd;
  height: 115px;
}
.bg-a {
  background-image: url('../images/bg1.png');
}
.bg-b {
  background-image: url('../images/bg2.png');
}
.bg-ab {
  background-image: url('../images/bg1.png'), url('../images/bg2.png');
}
Каждое фоновое изображение будет нарисовано на прочзрачном слое (transparent layer), эти слои ложатся друг на друга.
Изображение иллюстрирующее элемент с участием компонентов: background-color, background-images, borders.
  • Граница элемента нарисована на самом ближнем к пользователю слое (layer).
  • Далее идут слои для нарисования фонового слоя (background image) и слой для фонового цвета (background color).
Syntax
background-image: none;

background-image: «image»;

background-image: «image», «image», «image»;
none
Это ключево слово обозначающее отсутствие изображения.
«image»
При этом  «image» может являться одним из следующих функций:
  • url( url-string )
  • image(  image-tags? [ image-src? , color? ] )
  • image-set( image-set-option# )
  • element( id-selectors )
  • paint(  ident ,  declaration-value )
  • cross-fade( cf-mixing-image, cf-final-image)
  • linear-gradient( [  angle  | to  side-or-corner  ]? ,  color-stop-list  )
  • repeating-linear-gradient( [  angle  | to  side-or-corner  ]? ,  color-stop-list  )
  • radial-gradient( [  ending-shape> ||  size  ]? [ at  position  ]? ,  color-stop-list )
  • repeating-radial-gradient( [  ending-shape  ||  size  ]? [ at  position  ]? ,  color-stop-list  )
  • conic-gradient( [ from  angle  ]? [ at  position  ]?,  angular-color-stop-list  )
Например:
background-image: none;

background-image: url( '../images/bg.png' );

background-image: image(ltr 'arrow.png#xywh=0,0,16,16', red);

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png" 600dpi);

background-image: element( #myElementId );

(!) paint(  ident ,  declaration-value ) ;

background-image: cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);

background-image: linear-gradient(red, yellow, blue);

background-image: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);

background-image: repeating-radial-gradient(#e66465, #9198e5 20%); 

background-image: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);

4- CSS background-repeat

CSS background-repeat используется для того, чтобы настроить повтор фонового изображения. Оно может повторяться горизонтально, вертикально или по обоим сторонам. Или не повторяться.
/* Keyword values */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* Two-value syntax: horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* Global values */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;
Однозначный синтаксис является укороченной формой полного синтаксиса включающего два  значения:
Single value Two-value equivalent
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat
repeat
Изображение (image) будет повторяться много раз, достаточно чтобы оно охватило полностью пространство элемента. Последнее изображение может быть обрезано (clip), чтобы гарантировать оно не будет нарисовано за границы элемента.
space
Изображение повторяется как можно больше раз без обрезки (clip). Первые и последние изображения прикреплены к обоим сторонам элемента и пробелы равномерно распределяются между изображениями. CSS background-position пропускается, за исключением когда изображение только отображается без обрезки. Единственный случай, когда происходит обрезка, это когда использованное пространство недостаточно для отображения изображения.
round
Изображения повторяются как  {background-repeat: space}, но изображение может быть увеличено, чтобы между двумя изображениями не имелось пространства.
no-repeat
Изображение не повторяется (и поэтому область нарисования фонового изображения не обязательно будет полностью покрыта).
background-repeat-example.html
<!DOCTYPE html>
<html>
<head>
    <title>CSS background-repeat</title>
    <meta charset="UTF-8"/>
    <script>
        function setBgRepeat(value) {
           var myElement = document.getElementById("my-div");
           myElement.style.backgroundRepeat = value;
        }
    </script>
    <style>
       #my-div {
          border: 1px solid gray;
          height:110px;
          width: 310px;
          margin-top: 10px;
          background-image: url('../images/flower.png');
       }
    </style>
</head>
<body>
    <h3>CSS background-repeat</h3>
    Background Image:
    <img src="../images/flower.png" /> <hr/>
    <p style="color:blue;">Set CSS background-repeat:</p>

    <input name ="abc" type="radio" onClick="setBgRepeat('repeat-x')" /> repeat-x <br/>
    <input name ="abc" type="radio" onClick="setBgRepeat('repeat-y')" /> repeat-y <br/>
    <input name ="abc" type="radio" onClick="setBgRepeat('repeat')" checked/> repeat <br/>
    <input name ="abc" type="radio" onClick="setBgRepeat('space')" /> space <br/>
    <input name ="abc" type="radio" onClick="setBgRepeat('round')" /> round <br/>
    <input name ="abc" type="radio" onClick="setBgRepeat('no-repeat')" /> no-repeat <br/>

    <div id = "my-div"> </div>

</body>
</html>

5- CSS background-origin

CSS background-orgin используется для настройки исходного местоположения (orgin position) фонового изображения. Он может принять одно из следующих значений:
  1. border-box
  2. padding-box (Default)
  3. content-box
     
CSS {background-origin: border-box}
CSS {background-origin: padding-box}
CSS {background-origin: content-box}
background-origin-example.html
<!DOCTYPE html>
<html>
<head>
    <title>CSS background-origin</title>
    <meta charset="UTF-8"/>
    <script>
        function setBgOrigin(value) {
           var myElement = document.getElementById("my-div");
           myElement.style.backgroundOrigin = value;
        }
        function setBgRepeat(value) {
           var myElement = document.getElementById("my-div");
           myElement.style.backgroundRepeat = value;
        }
    </script>
    <style>
      .option {
         padding: 5px;
         width: 160px;
         display:inline-block;
         border: 1px solid gray;
      }
       #my-div {
          border: 20px dashed gray;
          height:110px;
          width: 310px;
          margin-top: 10px;
          padding: 15px;
          background-image: url('../images/flower.png');
          background-repeat: no-repeat;
       }
    </style>
</head>
<body>
    <h3>CSS background-origin</h3>
    Background Image:
    <img src="../images/flower.png" /> <hr/>

    <div class="option">
      <p style="color:blue;">background-origin:</p>

      <input name ="a" type="radio" onClick="setBgOrigin('border-box')" /> border-box <br/>
      <input name ="a" type="radio" onClick="setBgOrigin('padding-box')" checked/> padding-box <br/>
      <input name ="a" type="radio" onClick="setBgOrigin('content-box')" /> content-box
    </div>

    <div class="option">
      <p style="color:blue;">background-repeat:</p>

      <input name ="b" type="radio" onClick="setBgRepeat('repeat-x')" /> repeat-x <br/>
      <input name ="b" type="radio" onClick="setBgRepeat('repeat-y')" /> repeat-y <br/>
      <input name ="b" type="radio" onClick="setBgRepeat('repeat')" /> repeat <br/>
      <input name ="b" type="radio" onClick="setBgRepeat('space')" /> space <br/>
      <input name ="b" type="radio" onClick="setBgRepeat('round')" /> round <br/>
      <input name ="b" type="radio" onClick="setBgRepeat('no-repeat')" checked/> no-repeat
    </div>

    <div id = "my-div"> </div>

</body>
</html>

6- CSS background-position

CSS background-position используется для настройки начального местопложения (starting position) каждого фонового изображения (Относительно по сравнению с исходным местоположением (origin)).
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;
Например:
background-position-example.html
<!DOCTYPE html>
<html>
<head>
    <title>CSS background-position</title>
    <meta charset="UTF-8"/>
    <script src="background-position-example.js"> </script>
    <style>
      .option {
         padding: 5px;
         display:inline-block;
         border: 1px solid gray;
      }
       #my-div {
          border: 20px dashed gray;
          height:110px;
          width: 310px;
          margin-top: 10px;
          padding: 15px;
          background-image: url('../images/flower.png');
          background-repeat: no-repeat;
       }
    </style>
</head>
<body>
    <h3>CSS background-position</h3>
    Background Image:
    <img src="../images/flower.png" /> <hr/>

    <div class="option">
      <p style="color:red;">background-position:</p>

      <input name ="x" type="radio" onClick="setBgPosition('1px 2px 5px 10px')" /> top <br/>
      <input name ="x" type="radio" onClick="setBgPosition('bottom')" /> bottom <br/>
      <input name ="x" type="radio" onClick="setBgPosition('left')" /> left <br/>
      <input name ="x" type="radio" onClick="setBgPosition('right')" /> right <br/>
      <input name ="x" type="radio" onClick="setBgPosition('center')" /> center <br/>
      <input name ="x" type="radio" onClick="setBgPosition('left top')" checked/> left top <br/>
      <input name ="x" type="radio" onClick="setBgPosition('left bottom')" /> left bottom <br/>
      <input name ="x" type="radio" onClick="setBgPosition('bottom 10px right')" />
               bottom 10px right <br/>
      <input name ="x" type="radio" onClick="setBgPosition('bottom 10px right 20px')" />
               bottom 10px right 20px <br/>
       ... <br/>
    </div>

    <div class="option">
      <p style="color:blue;">background-origin:</p>

      <input name ="a" type="radio" onClick="setBgOrigin('border-box')" /> border-box <br/>
      <input name ="a" type="radio" onClick="setBgOrigin('padding-box')" checked/> padding-box <br/>
      <input name ="a" type="radio" onClick="setBgOrigin('content-box')" /> content-box
    </div>

    <div class="option">
      <p style="color:blue;">background-repeat:</p>

      <input name ="b" type="radio" onClick="setBgRepeat('repeat-x')" /> repeat-x <br/>
      <input name ="b" type="radio" onClick="setBgRepeat('repeat-y')" /> repeat-y <br/>
      <input name ="b" type="radio" onClick="setBgRepeat('repeat')" /> repeat <br/>
      <input name ="b" type="radio" onClick="setBgRepeat('space')" /> space <br/>
      <input name ="b" type="radio" onClick="setBgRepeat('round')" /> round <br/>
      <input name ="b" type="radio" onClick="setBgRepeat('no-repeat')" checked/> no-repeat
    </div>

    <div id = "my-div"> </div>

</body>
</html>
background-position-example.js
function setBgPosition(value) {
   var myElement = document.getElementById("my-div");
   myElement.style.backgroundPosition = value;
}
function setBgOrigin(value) {
   var myElement = document.getElementById("my-div");
   myElement.style.backgroundOrigin = value;
}
function setBgRepeat(value) {
   var myElement = document.getElementById("my-div");
   myElement.style.backgroundRepeat = value;
}
CSS background-position принимает однозначный, двухзначный, трехзначный или четырехзначный синтасис.

1-value syntax

CSS background-position в однозначном синтаксисе (1-value syntax) принимает следующие значения:
  • center
  • left, top, right, bottom
  • 10px, 5cm, 20%,...
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0;
background-position: 1cm;
background-position: 10ch;

2-value syntax

CSS background-position в двухзначном синтаксисе (2-value syntax) принимает следующие значения:
Value Same As
left top top left
left bottom bottom left
right top top right
right bottom bottom right
10px 20cm  
10% 20px  
...  
Примечание: В двухзначном синтаксисе(2-value syntax), если вы предоставите недействительное значение, оно будет пропущено браузером. Например  CSS {background-position: left left} является недействительным значением.

3-value syntax

Трехзначный синтаксис (3-value syntax) является расширением двухзначного синтаксиса. Вы можете понять больше через изображение ниже:
/* Edge offsets values */

background-position: bottom 10px right;
background-position: top right 10px;

4-value syntax

Четырехзначный синтаксис (4-value syntax) является расширением двухзначного синтаксиса. Вы можете понять больше через изображения ниже:
/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;

7- CSS background-size

  • TODO

View more Tutorials: