Background в html: Атрибут background | htmlbook.ru


21.06.2021 Facebook Twitter LinkedIn Google+ Разное


Содержание

Атрибут background | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис

<body background="URL">
...
</body>

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

background

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.
dtd"> <html> <head> <title>Тег BODY, атрибут background</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body background="images/snow.gif"> ... </body> </html>

Фон и границы — Изучение веб-разработки

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

CSS cвойство 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;
} 

Мы вернемся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства background.

Фоновый цвет

Свойство 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, поэтому вы видите только одну звезду. Попробуйте разные значения — repeat-x и

repeat-y чтобы увидеть, какие эффекты они оказывают.

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

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

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

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

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

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

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

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

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

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

Обычно свойство background-position задают в ввиде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.

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

.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;
}

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

.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.

Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных <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-repeat для image1 будет no-repeat. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться — в приведенном выше примере есть четыре фоновых изображения, и только два значения background-position. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться — image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.

Поиграем? В приведенном ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.

Закрепление фона

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

  • scroll: Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
  • fixed: Фиксирует  элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
  • local: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение scroll довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение local фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.  

Свойство background-attachment действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями — взгляните на background-attachment.html (также смотри исходный код здесь).

Использование сокращенного свойства background

Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства background. Это сокращение позволяет вам одновременно устанавливать все различные свойства.

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

При записи сокращенных значений фонового изображения необходимо соблюдать несколько правил, например:

  • background-color можно указывать только после последней запятой.
  • Значения background-size могут быть включены только сразу после background-position, разделенные символом ‘/’, например: center/80%

Посетите страницу MDN свойства

, чтобы увидеть полное описание.

 

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

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

Программы чтения с экрана не могут анализировать фоновые изображения, поэтому они должны быть чисто декоративными; любой важный контент должен быть частью HTML-страницы, а не находиться в фоне.

Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока. В этом уроке мы рассмотрим, как творчески использовать границы. Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращенное свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.

Мы можем установить границу для всех четырех сторон блока с помощью border:

.box {
  border: 1px solid black;
} 

Или мы можем нацеливаться на один край блока, например:

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

Индивидуальные свойства этих сокращений будут следующими:

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

И более детально:

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

Примечание: Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.

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

Закруглённые углы

Закругление углов блока достигается с помощью свойства border-radius и связанных свойств, которые относятся к каждому углу блока. В качестве значения могут использоваться два значения длины или процента: первое значение определяет горизонтальный радиус, а второе — вертикальный радиус. Чаще задают только одно значение, которое используется для обоих.

Например, чтобы сделать все четыре угла блока радиусом 10px:

.box {
  border-radius: 10px;
} 

Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:

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

В примере ниже мы установили все четыре угла, а затем изменили значения для верхнего правого угла, чтобы сделать его другим. Вы можете поиграть со значениями, чтобы изменить углы. Взгляните на страницу свойств для border-radius чтобы увидеть доступные варианты синтаксиса.

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

  1. Задайте рамку равную 5px black solid,  с закругленными углами 10px.
  2. Добавить фоновое изображение (используйте URL balloons.jpg) и установите размер таким образом, чтобы он покрыл весь блок.
  3. Задайте для <h3> полупрозрачный черный цвет фона и сделайте текст белым.

 

Примечание: Вы можете посмотреть решение здесь — но сначала попробуйте сделать это сами!

В этой теме мы рассмотрели довольно много, но как вы можете увидеть, возможностей по стилизации фона или границ блока намного больше. Изучите различные страницы свойств, если хотите узнать больше о каких-либо функциях, которые мы обсуждали. На каждой странице MDN есть много примеров использования свойств, с которыми вы можете поиграть и расширить свои знания.

В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?

background-image — CSS | MDN

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

Границы border элемента затем рисуются поверх них, и background-color рисуется под ними. То, как изображения отрисовываются относительно рамки и ее границ, определяется CSS свойствами background-clip и background-origin.

Если указанное изображение не может быть нарисовано (например, когда файл, определенный указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none.

Обратите внимание: Даже, если изображение непрозначно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать аттрибут background-color. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.
background-image: none;
background-image: url(http://www. example.com/bck.png);

background-image: inherit;

Значения

none
Это ключевое слово обозначает отсутствие изображений.
<image>
<image> обозначает изображение для отображения. Их может быть несколько, разделенных запятыми, поскольку поддерживается несколько фонов.

Официальный синтаксис

<bg-image>#

где
<bg-image> = none | <image>

где
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>

где
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>

где
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

где
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>

где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>

где
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

Несколько фонов и прозрачность

Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.

HTML содержимое
<div>
    <p>
        This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p>
        Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
</div>
CSS содержимое
pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 или ранее)[1] 4.0 3.5 1.0
Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 yes 1.3
Gradients 1.0-webkit 3.6 (1.9.2)-moz 10 11+-o 4.0-webkit
SVG images 8.0 4.0 (2.0) 9.0 9.5 5.0 [2]
element ? (Да)-moz Нет Нет Нет
image-rect Нет (Да)-moz Нет Нет Нет
Any <image> value. ? Нет ? ? ?
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support yes yes yes yes
Multiple backgrounds yes yes yes yes
Gradients yes -webkit
old webkit syntax for iOS 4.2 and older
? ? yes-webkit
old webkit syntax
SVG images yes [2] yes yes Нет
element (Да)-moz ? ? ?
image-rect (Да)-moz Нет Нет Нет
Any <image> value Нет ? ? ?

[1] Если пользовательские настройки browser.display.use_document_colors в about:config установлены на false, фоновые изображения не будут отображаться.

[2] Поддержка SVG в CSS background является неполной в текущей версии iOS Safari (5.0). То же самое для Safari до 5.0.

Учебник CSS 3. Статья «Работа с фоном элемента в CSS»

В этом учебнике мы уже рассмотрели с вами такие аспекты работы с изображениями как использование свойств границ (цвет, стиль и толщина), научились задавать тень для изображений (Статья «Тень элемента в CSS»), рассмотрели, как можно создать эффект рамки, добавив задний фон и пустой промежуток между границей и изображением (Статья «Блочная и строчная модель в CSS»). Научились делать изображения плавающими (Статья «Плавающие элементы в CSS») и позиционировать их относительно краев родительского элемента, научились управлять внешними отступами между элементами, но всего этого пока не достаточно.

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

Фон элемента это общий размер элемента, включая значения внутренних отступов (padding) и границ (border), но, не включая значение внешних отступов – свойство margin.

В настоящее время браузеры работают с тремя графическими форматами:

  • GIF (англ. Graphics Interchange Format — формат для обмена изображениями).
  • JPEG (англ. Joint Photographic Experts Group — название организации-разработчика).
  • PNG (англ. Portable network graphics — растровый формат хранения графической информации).

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

селектор {
background-image: url(images/main_bg.png);
}

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


Давайте рассмотрим пример, в котором установим задний фон, который представляет из себя три разноцветных квадрата размером 100 на 100 пикселей для элемента <body>:

<!DOCTYPE html>
<html>
<head>
	<title>Пример установки изображения в качестве фона</title>
<style> 
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-color: white; /* задаем задний фон для элемента */
}
</style>
</head>
	<body>
	</body>
</html>

По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали, в нашем примере это привело к тому, что элемент <body> полностью заполнился фоновым изображением.


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


Результат нашего примера:

Рис. 115 Пример установки изображения в качестве фона.

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

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

Это свойство имеет следующие доступные значения:

ЗначениеОписание
repeatФоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию.
repeat-xФоновое изображение будет повторяться по горизонтали (по оси x).
repeat-yФоновое изображение будет повторяться по вертикали (по оси y).
no-repeatФоновое изображение не будет повторяться.

Для следующего примера используем задний фон, который представляет из себя два разноцветных квадрата размером 10 на 10 пикселей.

<!DOCTYPE html>
<html>
<head>
	<title>Пример управления повтором фонового изображения</title>
<style> 
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
}
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("small_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
width: 200px; /* устанавливаем ширину элемента */
height: 200px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin-right: 10px; /* устанавливаем внешние отступы справа */
text-align: center; /* выравниваем текст по центру */
line-height: 200px; /* задаем высоту строки */
background-color: azure; /* указываем цвет заднего фона*/
}
.noRepeat {
background-repeat: no-repeat; /* фоновое изображение не будет повторяться.   */
}
.repeatX {
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
.repeatY {
background-repeat: repeat-y; /* фоновое изображение будет повторяться по вертикали */
}
</style>
</head>
	<body>
		<h2>Значение repeat для body (по умолчанию)</h2>
		<div class = "noRepeat">no-repeat</div>
		<div class = "repeatX">repeat-x</div>
		<div class = "repeatY">repeat-y</div>
	</body>
</html>

По аналогии с предыдущим примером для <body> мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков три класса, которые определяют как будет повторяться фоновое изображение, используя различные значения для свойства background-repeat:

  • Для первого блока мы указали, что изображение не будет повторяться (значение no-repeat), это значение чаще всего используется в работе.
  • Второй блок получил значение repeat-x, которое определяет, что фоновое изображение будет дублироваться по горизонтали.
  • Ну и в третьем блоке фон дублируется по вертикали (значение repeat-y).

Результат нашего примера:

Рис. 116 Пример управления повтором фонового изображения.

Управление позицией фонового изображения

По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием единиц измерения CSS, либо используя ключевые слова:

ЗначениеОписание
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x yЗадает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования фонового изображения</title>
<style> 
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
	<body>
		<div class = "leftTop">left top</div>
		<div class = "leftCenter">left center</div>
		<div class = "leftBottom">left bottom</div>
		<div class = "rightTop">right top</div>
		<div class = "rightCenter">right center</div>
		<div class = "rightBottom">right bottom</div>
		<div class = "centerTop">center top</div>
		<div class = "centerCenter">center center</div>
		<div class = "centerBottom">center bottom</div>
		<div class = "userPosition">20px 75%</div>
	</body>
</html>

В данном примере, мы создали 10 блоков с различными классами, в которых заданы различные значения, связанные с позиционированием фоновых изображений. Для первых девяти блоков были использованы всевозможные ключевые слова, а для последнего блока было задано значение для горизонтального позиционирования в пикселях, а для вертикального в процентах.

Результат нашего примера:

Рис. 117 Пример позиционирования фонового изображения.

Фиксированный задний фон

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

Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс» эффект.

<!DOCTYPE html>
<html>
<head>
	<title>Пример фиксированного фонового изображения</title>
<style> 
div {
height: 600px; /* устанавливаем высоту элемента */
}
.primerFixed {
background-image: url('nich.jpg'); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-attachment: fixed; /* указываем, что задний фон будет зафиксирован */
background-position: center; /* центрируем задний фон */
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
</style>
</head>
<body>
	<div></div>
	<div class = "primerFixed"></div>
	<div></div>
</body>
</html>

В данном примере для всех элементов <div> мы установили высоту равную 600px и разместили три таких блока на странице. Для среднего блока мы создали класс .primerFixed, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (ось x). Для демонстрации эффекта «параллакс» откройте пример в отдельном окне браузера и прокрутите страницу вниз.

Результат нашего примера:

Рис. 118 Пример фиксированного фонового изображения.

Свойства CSS 3 для работы с фоновыми изображениями

Настало время углубить свои знания в работе с задним фоном элементов и познакомиться с новыми свойствами CSS, которые были введены в стандарте CSS 3.

И первое CSS свойство, которое мы рассмотрим — background-origin, оно определяет как позиционируется фоновое изображение, или изображения по отношению к границе, внутреннему отступу и содержимому элемента.

Возможные значения этого свойства:

ЗначениеОписание
padding-boxФоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
border-boxФоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента).
content-boxФоновое изображение позиционируется от верхнего левого угла содержимого элемента.

Рассмотрим применение этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-origin</title>
<style> 
div {
width: 10em; /* устанавливаем ширину элемента */
height: 10em; /* устанавливаем высоту элемента */
border: 5px dashed orange; /* устанавливает пунктирную границу размером 5px оранжевого цвета */
background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 15px; /* устанавливаем величину внешнего отступа от правого края элемента */
padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
color: yellow; /* устанавливаем цвет шрифта желтый */
}
.test {background-origin: padding-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон) */
.test2 {background-origin: border-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента) */
.test3 {background-origin: content-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла содержимого элемента */
</style>
</head>
<body>
	<div class = "test">padding-box</div>
	<div class = "test2">border-box</div>
	<div class = "test3">content-box</div>
</body>
</html>

В данном примере мы разместили три блока, задали для них задний фон в виде изображения и указали для них различные значения свойства background-origin:

  • Первый блок (padding-box) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
  • Второй блок (border-box) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента со всех сторон).
  • Третий блок (content-box) — фоновое изображение позиционируется от верхнего левого угла содержимого элемента (изображение не заходит под границу элемента с этих сторон).

Результат нашего примера:

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

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

У Вас может возникнуть вопрос: — А в чем собственно заключается разница между свойством background-origin и background-clip?


Разница заключается в том, что свойство background-clip в отличие от background-origin обрезает ту часть фона, которая выходит из указанных рамок. Свойство background-origin лишь определяет, как позиционируется фоновое изображение.


В таблице представлены возможные значения этого свойства:

ЗначениеОписание
border-boxФон элемента занимает все пространство (включая границы элемента). Это значение по умолчанию.
padding-boxФон элемента занимает все пространство (не включая границ элемента).
content-boxФон элемента занимает все содержимое элемента (если у элемента установлены значения padding (внутренние отступы), то это пространство не будет окрашено).

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-clip</title>
<style> 
div {
width: 10em; /* устанавливаем ширину элемента */
height: 9em; /* устанавливаем высоту элемента */
background-image: url(medved.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
border: 5px dashed yellow; /* устанавливает пунктирную границу размером 5px черного цвета */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 10px; /* устанавливаем величину внешнего отступа от правого края элемента */
padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
}
.test {background-clip: border-box;}  /* устанавливаем, что фон элемента занимает все пространство (включая границы элемента) */
.test2 {background-clip: padding-box;}  /* устанавливаем, что фон элемента занимает все пространство (не включая границы элемента) */
.test3 {background-clip: content-box;}  /* устанавливаем, что фон элемента занимает все содержимое элемента */
</style>
</head>
<body>
	<div class = "test">border-box</div>
	<div class = "test2">padding-box</div>
	<div class = "test3">content-box</div>
</body>
</html>

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

  • Первый блок (padding-box) — фон элемента занимает все пространство. Это значение по умолчанию.
  • Второй блок (border-box) — фон элемента занимает все пространство (не включая границы элемента).
  • Третий блок (content-box) — фон элемента занимает все содержимое элемента.

Результат нашего примера:

Рис. 120 Пример использования свойства background-clip.

Как вы могли заметить свойства background-origin и background-clip, имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.

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

Установить размер заднего фона допускается с использованием единиц измерения CSS, процентов, либо ключевых слов:

ЗначениеОписание
autoФоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
lengthУстанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
%Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
coverМасштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения.
containМасштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Рассмотрим применение этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример масштабирования фоновых изображений</title>
<style> 
div {
width: 8em; /* устанавливаем ширину элемента */
height: 8em; /* устанавливаем высоту элемента */
border: 3px solid orange; /* устанваливаем сплошную границу размером 3 пикселя оранжевого цвета */
background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 15px; /* устанавливаем внешний отступ с правой стороны */	
margin-bottom: 15px; /* устанавливаем внешний отступ с нижней стороны */	
color: yellow; /* устанавливаем цвет элемента */
}
.test {background-size: auto;} /* фоновое изображение содержит свою ширину и высоту */
.test2 {background-size: 100px 100px;} /* устанавливаем ширину и высоту фонового изображения в пикселях */
.test3 {background-size: 70% 70%;} /* устанавливаем ширину и высоту фонового изображения в процентах от родительского элемента */
.test4 {background-size: cover;} /* масштабируем фоновое изображение под размеры элемента */
.test5 {background-size: contain;} /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */
</style>
</head>
	<body>
		<div class = "test">auto</div>
		<div class = "test2">100px 100px</div>
		<div class = "test3">70% 70%</div><br>
		<div class = "test4">cover</div>
		<div class = "test5">contain</div>
	</body>
</html>

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

  • Первый блок (auto) — фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
  • Второй блок (100px 100px) — первое значение устанавливает ширину, второе значение задает высоту в пикселях.
  • Третий блок (70% 70%) — первое значение устанавливает ширину, второе значение задает высоту в процентах.
  • Четвертый блок (cover) – масштабирует фоновое изображение под размеры элемента (некоторые части фонового изображения скрываются из поля зрения).
  • Пятый блок (contain) – масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Результат нашего примера:

Рис. 121 Пример масштабирования фоновых изображений.

Универсальное свойство background

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

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

Давайте рассмотрим пример использования универсального свойства background:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования универсального свойства background</title>
<style> 
html, body {
height: 100%; /* устанавливаем высоту элементов */
width: 100%; /* устанавливаем ширину элементов */
margin: 0; /* убираем внешние отступы элемента */
padding: 0; /* убираем внутренние отступы элемента */
}
header {
width: 100%; /* устанавливаем ширину элемента */
min-height: 34%; /* устанавливаем минимальную высоту элемента */
background: white url('cat_g.jpg') bottom/cover no-repeat; /* указываем цвет заднего фона, фоновое изображение, позицию/масштабируем под размеры элемента, фон не повторяется */
}
.primer2 {
width: 100%; /* устанавливаем ширину элемента */
min-height: 66%; /* устанавливаем минимальную высоту элемента */
background: url('lis.png') top/contain no-repeat, url('cat_g.jpg') bottom/cover no-repeat; 
/* Обратите внимание, что значения для различных изображений указываются через запятую */
/* Путь к изображению 1 позиция/масштаб повтор, Путь к изображению 2  позиция/масштаб повтор */
}
</style>
</head>
	<body>
		<header></header>
		<div class = "primer2"></div>
	</body>
</html>

И так, что мы сделали в этом примере:

  • Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
  • Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
  • Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

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

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


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и три изображения) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующий документ (внимательно изучите страницу перед выполнением):

    Практическое задание № 28.

    Подсказка: для того, чтобы отцентровать содержимое, необходимо указать значение auto для внешних отступов слева и справа, обратите внимание, что в примере использована тень для блоков.

    Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.


© 2016-2021 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]

сокращенная запись — учебник CSS

Как вы заметили из предыдущих уроков, для стилизации фона в CSS существует большое количество свойств. И если вам нужно указать сразу несколько из них, рекомендуем использовать свойство background — это сокращенная запись, которая принимает множество значений и освобождает от необходимости писать каждое свойство для фона по отдельности (что, кстати, довольно долго и неудобно).

Порядок записи значений background

Свойство background объединяет все свойства для фона. Вы можете перечислить в нем значения для:

  • background-image
  • background-position
  • background-size (CSS3)
  • background-repeat
  • background-attachment
  • background-origin (CSS3)
  • background-clip (CSS3)
  • background-color

Порядок написания значений может быть произвольным — браузер сам определит соответствие свойств и значений. Но для схематичного пояснения мы используем последовательность из спецификации CSS:




Как видно на рисунке, мы пишем значения всех свойств через пробел как обычно. Исключением являются свойства background-position и background-size — их необходимо разделять знаком слэша /.

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


background-image: none;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;

Для примера запишем стиль через свойство background, определив только цвет фона (background-color) и порядок его обрезки (background-clip):


background: content-box #aaa;

Этот код эквивалентен такому коду:


background-image: none; /* осталось по умолчанию */
background-position: 0% 0%; /* осталось по умолчанию */
background-size: auto; /* осталось по умолчанию */
background-repeat: repeat; /* осталось по умолчанию */
background-attachment: scroll; /* осталось по умолчанию */
background-origin: content-box;
background-clip: content-box;
background-color: #aaa;

Здесь мы отметили те свойства, которые не изменились при написании сокращенной записи. И, наверное, вы уже видите, что свойство background-origin приняло такое же значение, как и background-clip, хотя мы вроде как не собирались его менять. Дело в том, что для background-origin и background-clip используются одинаковые ключевые слова — content-box, padding-box, border-box. И если указать только одно из этих ключевых слов в свойстве background, то оно будет применено сразу к двум свойствам. Если же вам понадобится указать разные значения для background-origin и background-clip, запишите их рядом через пробел, как показано на схеме выше (здесь важна последовательность — сначала идет значение background-origin, затем — background-clip).

Влияние каскадности на свойства

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

Допустим, мы написали следующий код:


background-color: blue;
background: url(img/cat-transparent-bg.png) no-repeat;

Мы ожидаем увидеть изображение кота на синем фоне, но не тут-то было. Оказывается, второе свойство background перезаписало первое значение background-color на значение по умолчанию (т. е. на transparent). Решить проблему можно, поменяв местами строки:


background: url(img/cat-transparent-bg.png) no-repeat;
background-color: blue;

А теперь мини-задача: если в последней строке этого кода заменить свойство background-color: blue на упрощенное свойство background: blue, как вы думаете, что произойдет с фоновым рисунком и значением no-repeat?

Рекомендации по использованию сокращенного свойства

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

Кроме того, если вам потребуется писать стили с учетом поддержки браузера Internet Explorer 8 (или более ранних версий), а в свойстве background у вас будут содержаться значения для свойств CSS3, то браузер не сможет считать их и полностью проигнорирует свойство background. Поэтому свойства из CSS3 рекомендуется записывать по отдельности.


Далее в учебнике: устанавливаем несколько фоновых рисунков для элемента.

background » Скрипты для сайтов

1 581 Other / Codepen

Размытый сверкающий фон на канвасе

Размытый сверкающий фон на канвасе. Сделано с использованием библиотеки GSAP

3 006 Codepen

Генератор случайных разноцветных кружков

Генератор на canvas разноцветных рандомных кругов.

6 562 Codepen

Низко полигональный генератор фона

Генератор фона из треугольников с возможностью настройки глубины, вариативности, цветов, градиента. Полученный результат можно скачать, как изображение любого выбранного размера

7 496 Скрипты / Other

Bubbly — анимированный фон из пузырьков на canvas

Скрипт bubbly позволяет создать на страницы анимированный фон из пузырьков, которые можно заставить двигаться по заданной математической формуле. В параметрах также настраиваются разные визуальные эффекты, такие как блюр, цвета, размеры и т.п.

2 712 Codepen

SVG маска для фонового изображения

SVG маска для изображения. Удерживая левую кнопку мышки область маски будет расти и изображение вернется к своему исходному состоянию. Перемещая курсор мыши, область под ним будет отображать исходную картинку без маски.

3 034 Codepen

Капельный фон

Фон с эффектом перетекающих капель. Сделано с помощью SVG масок и CSS анимации.

8 071 Codepen

Анимированный градиентный фон на SVG

Задний фон с анимированным градиентом в SVG

11 269 Скрипты / Animation

CSS3 анимация звездного ночного неба

Несколько экспериментов над фоном и его анимацией с помощью только CSS3. Статичный и анимированный фон звездного неба и анимированный фон падающего снега.

1 229 Полезно

Делаем сами CSS3 фон

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

1 953 Полезно

CSS3 узор для фона

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

2 033 Скрипты / Other

Полноразмерное фоновое изображение

Всё что нам понадобится — это изображение, которое будет использоваться в качестве фонового. При изменении окна браузера, будут изменяться и размеры нашего фонового изображения. Плагин проверен в Safari, Chrome, Opera, IE8 и Firefox.

2 136 Скрипты / Menu & Nav

Меню с анимацией фона кнопки

Вид меню с различными эффектами анимации фона. Смена фона происходит, либо как слайд — справа налево, сверху вниз, либо происходит плавное изменение цвета.

  • Назад
  • 1
  • 2
  • Вперёд

19 CSS анимированных фонов

Коллекция отобранных вручную бесплатных HTML и CSS анимированных фонов примеров кода. Обновление коллекции за январь 2019 г. 7 новинок.

  1. Фоновые шаблоны CSS
  2. Фиксированные фоны CSS
  3. CSS-фоны частиц
  4. Фон треугольников CSS
  5. Фоновые эффекты JavaScript
  6. Плагины фона jQuery

Автор
  • Кастра Демосфен
О коде

CSS-анимация «Падающие листья»

Октябрьские падающие листья CSS-анимация CSS без JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Матье С.
О коде

Шумовой фон

CSS — только анимированный фон статического шума.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Адам Абундис
О коде

Шаблонная анимация (бесконечная)

Используется Flexbox для вертикального и горизонтального центрирования текста.Используется ключевых кадров для установки бесконечной прокрутки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Юсуке Накая
О коде

Только CSS: Предупреждение

Полосатый фон.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Игорь Миленкович
О коде

Прохладный горный фон

Классный горный фон с анимацией — слегка отзывчивый.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Вайбхав Арора
О коде

Анимированный фон с рябью

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Роб ДиМарцо
О коде

Бесконечный SVG треугольник Fusion

Треугольники созданы.Треугольники уничтожены.
И так далее и тому подобное. Я создаю 60 SVG, каждый из которых содержит 4 треугольника (многоугольника). Каждый многоугольник циклически проходит через цвет и анимируется наружу от центральной точки родительского SVG каждую 1 секунду. Вся анимация повторяется бесконечно каждые 4 секунды.
Каждый div имеет clip-path для создания шестиугольной маски. Когда шестиугольники соединяются вместе, расширяющиеся треугольники равномерно переходят в треугольники соседних шестиугольников, пока не исчезнут.
Я использовал CSS Grid в качестве отправной точки, но у меня все еще осталась куча хорошо воспитанных шестиугольников с пустым пространством между ними. Чтобы «соединить» шестиугольники, я идентифицировал nth-children , который соответствует строке, и перемещал их вверх и вниз с помощью преобразования : translate;

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор
  • Крис Нил
Сделано с
  • HTML / CSS (SCSS) / JavaScript (Babel)
О коде

Анимированный градиент маски-изображения CSS

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор
  • Майк Голус
О коде

CSS Светлячки

Элегантное решение, предназначенное только для HTML / CSS, для добавления спокойного эффекта светлячков на вашу страницу.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Такеши Кано
О коде

Чистая анимация частиц CSS

Анимация частиц CSS без JavaScript. Самым важным моментом является случайное движение частиц. Виньетирование было создано свойством mask-image .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Анастасия Гудвин
О коде

Фон мерцающих звезд на чистом CSS

Анимация тонких мерцающих звезд и движущихся облаков с использованием только CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • осорина ирина
О коде

Фоновый эффект

Эффект фона HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Мохаммад Абдул Мохайман
О коде

Анимированный фон на чистом CSS

Анимированный фон на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Крис Смит
О коде

Фоновый эффект скользящих диагоналей

Анимированный фон под контентом.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Анимация фона

Фоновая анимация HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Чандан Чоудхари
О коде

Анимированный фон

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Мануэль Пинто
О коде

Чистая анимация фона CSS3 с градиентом

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

CSS Анимация фона

Пример фоновой анимации с использованием CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • коотоопас
О коде

Бесконечная анимация фона

Чистый CSS бесконечный фоновая анимация .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Как применить преобразования CSS3 к фоновым изображениям

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

Эта статья была обновлена ​​в 2020 году. Чтобы узнать больше о CSS, прочтите нашу книгу CSS Master, 2nd Edition.

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

  #myelement {
  преобразовать: повернуть (30 градусов);
}
  

Отличный материал. Однако при этом вращается весь элемент — его содержимое, граница и фоновое изображение. Что, если вы хотите повернуть только фоновое изображение? Или что, если вы хотите, чтобы фон оставался фиксированным при повороте содержимого?

Нет предложения W3C CSS для преобразования фонового изображения и . Это было бы невероятно полезно, поэтому, возможно, однажды он появится, но это не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.

Один из вариантов — создать новое фоновое изображение из оригинала, скажем, повернутое на 45 градусов. Этого можно достичь с помощью:

  1. процесс обработки изображений на стороне сервера
  2. на стороне клиента холст — код обработки изображений, или
  3. API, предоставляемых некоторыми службами CDN, размещающими изображения.

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

К счастью, есть решение на основе CSS. По сути, это хак, который применяет фоновое изображение к псевдоэлементу :: before или :: after , а не к родительскому контейнеру.Затем псевдоэлемент можно преобразовать независимо от содержимого.

Преобразование только фона

К элементу-контейнеру могут применяться любые стили, но он должен быть установлен в положение position: relative , поскольку наш псевдоэлемент будет расположен внутри него. Вы также должны установить overflow: hidden , если вы не хотите, чтобы фон выливался за пределы контейнера.

  #myelement {
  положение: относительное;
  переполнение: скрыто;
}
  

Теперь мы можем создать абсолютно позиционированный псевдоэлемент с преобразованным фоном. z-index установлен на -1 , чтобы он отображался под содержимым контейнера:

  #myelement :: before {
  содержание: "";
  позиция: абсолютная;
  ширина: 200%;
  высота: 200%;
  верх: -50%;
  осталось: -50%;
  z-индекс: -1;
  фон: url (background.png) 0 0 повтор;
  преобразовать: повернуть (30 градусов);
}
  

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

Фиксация фона на преобразованном элементе

Все преобразования родительского контейнера применяются к псевдоэлементам. Следовательно, нам нужно отменить преобразование. Например, если контейнер повернут на 30 градусов, фон необходимо повернуть на -30 градусов, чтобы вернуться в исходное положение:

  #myelement {
  положение: относительное;
  переполнение: скрыто;
  преобразовать: повернуть (30 градусов);
}

#myelement :: before {
  содержание: "";
  позиция: абсолютная;
  ширина: 200%;
  высота: 200%;
  верх: -50%;
  осталось: -50%;
  z-индекс: -1;
  фон: url (background.png) 0 0 повтор;
  преобразовать: повернуть (-30 градусов);
}
  

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

Вот соответствующие демонстрации в прямом эфире на CodePen:

Посмотрите, как Pen
CSS3 Transforms on Background Images by SitePoint (@SitePoint)
на CodePen.

Эффекты работают во всех основных браузерах и в Internet Explorer до версии 9. В старых браузерах преобразования вряд ли будут отображаться, но фон все равно должен отображаться.

фонов HTML

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

В этом руководстве основное внимание уделяется:

  • Добавление цвета фона к элементам
  • Добавление фонового изображения к элементам
  • Выбор хорошего фона
  • Переход на CSS

Добавление цвета фона к элементам

Вы можете установить цвет фона элементов с помощью атрибута bgcolor .Этот атрибут может принимать название цвета, шестнадцатеричное значение или значение RGB.

Установка цвета фона веб-страницы

Все приведенные выше строки кода устанавливают белый цвет фона веб-страницы.

Установка цвета фона таблицы

Чтобы установить один цвет фона для всей таблицы, используйте атрибут bgcolor внутри тега

.

Вот таблица с
цвет фона оранжевого

Вывод:
Вот стол с
цвет фона оранжевый

Установка цвета фона строки таблицы

Вы также можете установить цвет фона только для одной строки таблицы, а не для всей таблицы.Для этого используйте атрибут bgcolor внутри тега .

Эта таблица желтая строка
Эта таблица зеленая строка

Вывод:
Эта таблица ряд желтый
Этот стол ряд зеленый

Установка цвета фона ячейки таблицы

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

Эта ячейка имеет белый цвет фона Цвет фона не указан
Эта ячейка имеет синий цвет фона Цвет фона не указан

Вывод:
Эта ячейка имеет белый цвет фона Цвет фона не указан
Эта ячейка имеет синий цвет фона Цвет фона не указан

Добавление фонового изображения к элементам

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

Добавление фонового изображения на веб-страницу

В приведенном выше коде URL-адрес — это относительный путь в первой строке и абсолютный путь во второй строке.

Добавление фонового изображения в таблицу

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

Эта таблица будет
небо фоновое изображение

Вывод:
Эта таблица будет
небо фоновое изображение

ПРИМЕЧАНИЕ. Если у вас есть элемент, размеры которого больше, чем у изображения, которое вы установили в качестве фона, изображение будет повторяться.Вы можете увидеть это в действии в приведенном выше примере. Изображение начинает повторяться сразу после буквы «u» в слове «фон».

Выбор хорошего фона

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

При установке цвета фона ….

Вы всегда должны следить за тем, чтобы цвет фона соответствовал цвету текста и изображений на странице, а также общему виду страницы (все должно работать вместе).Общее правило в веб-дизайне — темный текст на светлом фоне, и вы увидите эту комбинацию на большинстве веб-сайтов. На некоторых веб-сайтах есть светлый текст на темном фоне, и надо отдать им должное, они тоже неплохо справляются с этим. Таким образом, можно сделать веб-страницу хорошо выглядящей как с темным текстом на светлом фоне, так и с светлым текстом на темном фоне, но вы должны придерживаться светлого текста на темном фоне, поскольку это то, что люди привыкли видеть, и это общее правило в сети.

Примеры удачных сочетаний цветов фона и текста:

Черный текст на сером фоне Средний синий текст на очень голубом фоне Оранжевый текст на черном фоне Черный текст на белом фоне Зеленый текст на голубом фоне

Выбор хорошей цветовой схемы иногда может быть трудным и сложным процессом. Чтобы помочь вам в этом, посетите сайт colorblender.com. Вы выбираете цвет или цвета, и он сообщит вам в режиме реального времени, какие цвета подходят ему.

При установке фонового изображения ….

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

При установке фонового изображения вы должны задать себе следующие вопросы:

  • Насколько фоновое изображение увеличит время загрузки страницы?
    Очевидно, что фоновое изображение увеличит время загрузки, поскольку это отдельный файл, но насколько? Если это несколько секунд, тогда ничего страшного, но если это, скажем, 15 секунд, 20 секунд или даже больше, чем это, не годится.Такая задержка может (и часто делает) неудобства для посетителей веб-сайтов.
  • Как будет выглядеть фоновое изображение при его повторении?
    Как указано выше, если у вас есть элемент, размеры которого больше, чем у изображения, которое вы установили в качестве фона, изображение будет повторяться. Вы можете увидеть это в действии в приведенном выше примере фонового изображения таблицы. Вы должны убедиться, что фоновое изображение выглядит нормально при повторении и не делает веб-страницу непривлекательной и / или не создает путаницы.
  • Будет ли фоновое изображение отвлекать посетителя от содержания страниц?
    Иногда бывает, что фоновое изображение настолько привлекательно / непривлекательно / каким-то образом подчеркнуто, что отвлекает внимание посетителей веб-страниц и заставляет их обращать внимание на изображение, а не на фактическое содержание страницы. Вы должны попытаться сосредоточиться на достижении баланса между фоном страницы и ее содержанием, где фон достаточно хорош, чтобы добавить эстетическое качество веб-странице, но недостаточно хорош, чтобы отвлечь внимание посетителей вашей веб-страницы.

Переход на CSS

Установка цветов фона и изображений с помощью HTML — это прекрасно, но, как и в случае со шрифтами, фоны также перешли на CSS.

Атрибуты bgcolor и background устарели, и вместо них следует использовать CSS.

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

Таким образом, вы все еще можете использовать атрибуты bgcolor и background , но вместо них следует использовать CSS, поскольку он более практичен, а использование CSS для стилизации является стандартом.

Если вы хотите начать изучение настройки фона с помощью CSS, посетите нашу страницу свойств фона CSS.

Цвет фона HTML: Как настроить фон

Обычная веб-страница имеет белый фон. Таблица и тексты тоже. Черный текст на белом фоне очень распространен и скучен. Это было обычным делом в те дни, когда веб-дизайн находился на начальной стадии. Но по мере развития технологий и развития CSS появилось больше возможностей для создания более привлекательных веб-страниц.В настоящее время большинство веб-сайтов имеют красочные веб-страницы. Разработка таких веб-страниц осуществляется путем объединения HTML с CSS. В CSS есть много возможностей для изменения фона всего в HTML. Цвет фона HTML всей страницы, таблиц и даже текста также можно изменить с помощью CSS. В этой другой статье мы предлагаем вам на выбор полную таблицу цветов HTML. Некоторые из способов описаны ниже.

Темы в статье

Цвет фона тела с использованием названий цветов

Одним из наиболее распространенных способов изменения цвета фона HTML веб-страницы является использование простых названий цветов, таких как красный, зеленый, синий и т. Д.Для изменения цвета фона используется атрибут background-color. Ниже приведен пример изменения цвета фона с помощью встроенных стилей.

 

Эта веб-страница имеет красный цвет фона!

Атрибуту background-color присвоено значение красного цвета. Таким образом, цвет фона HTML теперь красный. Красный можно заменить любым названием цвета.


Цвет фона корпуса с использованием шестнадцатеричных кодов цветов

Мир полон красок.При разработке веб-страниц можно использовать множество цветов. Каждый цвет имеет определенное название, например красный, желтый, черный и т. Д. Но у каждого цвета есть множество оттенков. Например, красный цвет доступен в различных оттенках, таких как темно-красный, светло-красный, малиновый, огнеупорный и т. Д. То же самое и со многими другими цветами. Итак, как использовать эти цвета в HTML? Ответом на это является модель RGB. Красный, зеленый и синий цвета можно смешивать, чтобы получить широкий спектр цветов. Каждый из этих оттенков имеет шестизначный код. Этот код известен как шестнадцатеричный цветовой код.

Цветовые коды

Hex также можно использовать с HTML и CSS для изменения цвета фона HTML веб-страницы. Они также используются с атрибутом background-color. Вместо названия цвета используется цифровой знак (#), за которым следует шестизначный код оттенка. Ниже приведен пример изменения цвета фона с помощью метода встроенных стилей CSS.

 

Это демонстрационная веб-страница

Обратите внимание на приведенный выше код.Все аналогично предыдущему методу, но с небольшими изменениями. Вместо присвоения имени цвета в качестве значения атрибута background-color используется # FF00FF. # FF00FF — шестнадцатеричный код пурпурного цвета.

Щелкните здесь, чтобы выбрать любой оттенок с его шестнадцатеричным кодом цвета.

Изменение цвета фона HTML тега div

Что делать, если вы хотите изменить цвет фона HTML только для некоторой части веб-страницы? Это тоже возможно. Div используется для определения подразделения или раздела на веб-странице.Цвет фона таких разделов или разделов также можно изменить с помощью CSS. Есть несколько способов сделать это. Но я объясню самые простые и быстрые из них, то есть встроенные стили.

 

Цвет фона этого тега div красный, а цвет фона этой веб-страницы - желтый

В приведенном выше коде цвет фона веб-страницы желтый, а у части div красный фон.В теге div встроенный стиль используется для установки красного цвета фона. # FFF00 и # FF0000 — это шестнадцатеричные коды цветов желтого и красного соответственно.


Изменение цвета фона таблицы

Таблицы играют важную роль в веб-дизайне. У таблиц много ролей. Столы также должны выглядеть привлекательно. Есть много способов, с помощью которых стол может выглядеть лучше и привлекательнее. Один из таких способов — задать цвет фона. Подобно тегу body и тегу div, тегу таблицы также можно присвоить встроенные стили с атрибутом background-color.Ниже приведен пример таблицы с тремя строками и тремя столбцами и зеленым фоном (# 00FF00).

 

<стиль>
table, th, td {
граница: сплошной черный 1px;
}



<таблица>

 Имя 
 Страна 
 Возраст 


 Джон 
 США 
 21 



 Сэм 
 Испания 
 22 



 

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


Изменение цвета фона текста

На веб-странице всегда много текста. Как правило, тексты не имеют определенного цвета фона. Но если есть необходимость в тексте с определенным цветом фона, встроенные стили можно использовать и в теге span.Ниже приведен пример изменения цвета фона текста с помощью встроенных стилей.

 

этот текст не имеет цвета фона

этот текст имеет красный цвет фона

этот текст имеет зеленый цвет фона

В приведенном выше коде первый абзац не имеет цвета фона.Второй абзац имеет красный (# FF0000) фон, а третий абзац имеет зеленый (# 00FF00) фон.

Заключение

С цветами все выглядит лучше. Цвета играют большую роль в веб-дизайне. В начале истории Интернета на экранах не было цветов. Итак, первые реализации HTTP / HTML не имели такой поддержки. Они часто используются в HTML и CSS для создания привлекательных веб-страниц. Цвета могут быть применены ко всей веб-странице или к некоторой ее части с помощью тега div.Таблицы также могут иметь цвет фона HTML. Даже определенные строки и столбцы также могут иметь цвет фона. Цвет фона также можно применить к тексту с помощью тега span. HTML и CSS предоставляют множество возможностей для изменения цвета фона практически всего. Следует только знать, как эффективно использовать эти параметры, чтобы веб-сайты выглядели более привлекательно и лучше.

фоновых изображений | HTML Dog

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

 
body {
  фон: белый URL (http://www.htmldog.com/images/bg.gif) без повтора вверху справа; 
}
  

Это объединяет следующие свойства:

  • background-color , с которым мы сталкивались раньше.
  • background-image , где находится само изображение.
  • background-repeat , так изображение повторяется. Его значение может быть:
    • повтор , эквивалент эффекта «плитки» по всему фону,
    • repeat-y , повторение по оси y, вверху и внизу,
    • repeat-x (повторение по оси x, рядом) или
    • no-repeat (показывает только один экземпляр изображения).
  • background-position , который может быть верхний , центр , нижний , левый , правый , длина, процентное соотношение или любая разумная комбинация, например верхний правый .

Ссылка на нас! Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.

Неповторяющийся фон в правом верхнем углу.

На самом деле его можно использовать также для указания некоторых других функций фона, в частности, прикрепления, клипа, источника и размера (см. Ссылку на свойство background для подробностей), но давайте пока не будем увлекаться — цвет, изображение, повтор и положение — безусловно, самые фундаментальные аспекты, которыми вы хотели бы манипулировать чаще всего.

Фоновые изображения можно использовать в большинстве HTML-элементов — не только для всей страницы (тела), но и для простых, но эффективных результатов. Например, фоновые изображения используются на этом веб-сайте как маркеры в списках, как увеличительное стекло в поле поиска и как значки в верхнем левом углу некоторых заметок, например этой.

Удалить белый фон из изображения онлайн (без загрузки)

Toggle navigation БЕСПЛАТНЫЕ ИНСТРУМЕНТЫ РЕДАКТИРОВАНИЯ ИЗОБРАЖЕНИЙ
      • Английский

      • 5

        Español

      • Français

      • Deutsch

      • 2147 ИЗОБРАЖЕНИЕ
        ОНЛАЙН.CO I O
        • Инструменты изображения
        • Фильтры изображений
          • Обрезка изображения
          • Обрезка по кругу
          • Отразить изображение
          • Повернуть изображение
          • Отрегулируйте яркость изображения 5
          • Grays Увеличить резкость изображения
          • Размыть изображение
          • Светлее фото
          • Затемнить фото
          • Отрегулировать контрастность изображения
          • Добавить шум к изображению
          • Сделать фотографию в тонах сепии
          • Изменить экспозицию
          • на фотографии
          • изображения
          • Изменить насыщенность изображения
          • Отрегулировать яркость изображения
          • Выровнять фото онлайн
          • Обрезать фото (значения цвета)
          • Инвертировать изображение (цвета)
          • 90 915 изменить гамму изображения
          • цветную фотографию в черно-белое изображение
          • пороговое изображение
          • монохромное изображение
          • эффект постеризации на фотографии
          • эффект свечения на фотографии
          • корректировка HSL изображения
        инструменты
        • Конвертировать 90+ форматов изображений
        • Конвертировать JPG в файл PDF
        • Конвертировать PNG в файл PDF
        • Конвертировать png в изображение ico
        • Конвертировать jpg в изображение ico
        • Конвертировать изображение png в jpg
        • Преобразование jpg в изображение PNG
        • Преобразование JPG в Webp
        • Преобразование PNG в Webp
        • Преобразование Webp в JPG
        • Преобразование Webp в PNG 9 conv0008
        • Изображение в Base64 конвертер 58 58 erter
        • Конвертер изображения в HTML
      • Инструменты для обработки изображений
        • Сжать изображение онлайн новый
        • Изменить размер изображения
        • Палитра цветов изображения
        • 0 Изображение водяного знака
        • 15000 58 Объединить изображения
        • Карандашный набросок вашей фотографии
        • Удалить белый фон
        • Добавить текст к изображению
        • Цензорное изображение
        • Рукописное изображение подписи
        • Генератор текста в изображение
        • Наложение изображений
        • Генератор изображений-заполнителей
        • Цветовая палитра из изображения
        • Нарисуйте подпись на фотографии
        • Добавьте логотип на фотографию
        • Сделайте прозрачным backg round
        • Сделать закругленный угол изображения
        • Написать на изображении
        • Добавить эмодзи к фотографии
      • Инструменты для изображений GIF
        • Сделать Gif-анимацию
        • PNG Анимированный GIF в JPG 58
        • 909 — GIF
        • Flip Gif-анимация
        • Повернуть Gif-анимацию
        • Изменить скорость анимации GIF
        • GIF Resizer
        • Извлечь изображения из GIF
        • Объединить изображения GIF
      • Линейный график
      • Генератор
      • Создатель круговых диаграмм
      • Генератор столбчатых диаграмм
      • Генератор столбчатых диаграмм
      • Создатель кольцевых диаграмм
      • Создатель диаграмм с областями
      • Генератор свечей 900 08
      • Генератор столбчатых диаграмм
      • Генератор нескольких столбчатых диаграмм
      • Генератор столбчатых диаграмм
      • Генератор столбчатых диаграмм с накоплением
      • Генератор столбчатых диаграмм с накоплением
      • Генератор столбчатых диаграмм
      • Создатель диаграмм
    • Разное Цветной инвертор
    • Зашифровать изображение
    • Расшифровать изображение
    • Эффект xerox
    • Преобразователь текста
    • Счетчик слов
    • Счетчик символов
    • Преобразователь случайного регистра
    • 30 9000 Уровень грязного белого

      Удалить белый BG

      Реклама

      .
Comments