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

Tổng quan về CSS Background
CSS background-color
CSS background-image
CSS background-repeat
CSS background-origin
CSS background-position
CSS background-size

1. Tổng quan về CSS Background

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>

Смотрите так же:
Руководство CSS Colors
Руководство CSS Opacity

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) фонового изображения. Он может принять одно из следующих значений:

border-box
padding-box (Default)
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