Каждый элемент в DOM-дереве напоминает прямоугольник, который имеет фоновый слой, он может быть либо полностью прозрачным, либо цветным, либо содержать изображение. Этот фоновый слой находится под контролем 8 свойств CSS (плюс 1-го сокращённого свойства).
Свойство background-color задает цвет фона для элемента. Это значение может быть любым принятым значением цвета, или (для прозрачного блока) ключевым словом transparent
.
.left { background-color: #ffdb3a; } .middle { background-color: #67b3dd; } .right { background-color: transparent; }
Цвет фона рисуется в области блочной модели, указанной в свойстве background-clip. Если также определяются какие-либо фоновые изображения, цветной слой распологается под ними.
В отличие от слоев изображений, которых может быть несколько, цветной слой может быть только один для элемента!
Свойство background-image определяет фоновое изображение (или изображения) для элемента. Это значение обычно представляет собой URL к картинке, определенный в url()
нотации. Также может быть использовано значение none
, которое будет учитываться в качестве слоя, но пустого.
.left { background-image: url('ire.png'); } .right { background-image: none; }
Мы также можем указать несколько фоновых изображений, отделенных друг от друга запятой. Каждое последующее изображение будет помещается за предыдущим на Z-оси.
.middle { background-image: url('khaled.png'), url('ire.png'); /* Other styles */ background-repeat: no-repeat; background-size: 100px; }
Свойство background-repeat управляет тем, как фоновое изображение заполняет пространство, после того как установлен его размер (при помощи свойства background-size (см. ниже)) и расположение (при помощи свойства background-position (см. ниже)).
Значение этого свойства может быть одним из следующих: repeat-x
, repeat-y
, repeat
, space
, round
, no-repeat
. Кроме первых двух (repeat-x
и repeat-y
), другие значения могут быть определены или один раз, для оси х и оси у, или для каждой оси по отдельности.
.top-outer-left { background-repeat: repeat-x; } .top-inner-left { background-repeat: repeat-y; } .top-inner-right { background-repeat: repeat; } .top-outer-right { background-repeat: space; } .bottom-outer-left { background-repeat: round; } .bottom-inner-left { background-repeat: no-repeat; } .bottom-inner-right { background-repeat: space repeat; } .bottom-outer-right { background-repeat: round space; }
Свойство background-size определяет размер фонового изображения. Его значение может содержать ключевое слово, длину или процент.
Ключевые слова, доступные для этого свойства, это contain
и cover
. Ключевое слово contain
будет масштабировать изображение с сохранением пропорций, до тех пор пока изображение целиком сможет поместиться в пределах области. cover
будет масштабировать изображение до тех пор пока его высота или ширина сможет поместиться в пределах области.
.left { background-size: contain; background-image: url('ire.png'); background-repeat: no-repeat; } .right { background-size: cover; /*Остальные стили такие же как для класса as .left */ }
При указании размеров в единицах измерения или процентах, мы можем определить и ширину, и высоту фонового изображения. Значения в процентах вычисляются по отношению к размеру элемента.
.left { background-size: 50px; /*Остальные стили такие же как для класса .left */ } .right { background-size: 50% 80%; /*Остальные стили такие же как для класса .left */ }
Свойство background-attachment управляет тем, как фоновое изображение ведет себя при прокручивании страницы, относительно видимой области экрана и элемента. Оно имеет три возможных значения.
Ключевое слово fixed
означает, что фоновое изображение фиксируется в видимой области экрана и не двигается, даже когда пользователь прокручивает прокручивает окна. local
означает, что фон должен быть закреплен в своем положении в элементе. Если элемент имеет прокрутку и фоновое изображение позиционируется сверху, то при прокрутке элемента вниз, фоновое изображение останется на месте, вне области видимости. И, наконец, scroll
означает, что фоновое изображение является фиксированным и не будет прокручиваеться вместе с содержанием элемента.
.left { background-attachment: fixed; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat; overflow: scroll; } .middle { background-attachment: local; /* Остальные стили такие же как для класса .left */ } .right { background-attachment: scroll; /*Остальные стили такие же как для класса .left */ }
Это свойство, в сочетании со свойством background-origin, определяет, где должно быть начальное положение фонового изображения. Это значение может быть либо ключевым словом, либо длиной, либо процентом, и мы можем указать положение вдоль оси х и оси у.
Доступны следующие ключевые слова top
, right
, bottom
, left
и center
. Мы можем использовать эти ключевые слова в любой комбинации, и если указано только одно ключевое слово, то предполагается что другое равно center
.
.top-left { background-position: top; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat; } .top-middle { background-position: right; /*Остальные стили такие же как для класса .top-left */ } .top-right { background-position: bottom; /*Остальные стили такие же как для класса .top-left */ } .bottom-left { background-position: left; /*Остальные стили такие же как для класса .top-left */ } .bottom-right { background-position: center; /*Остальные стили такие же как для класса .top-left */ }
Для определения значений в единицах длины или процентах, мы можем указать положение вдоль оси х и у. Процентные значения устанавливаются по отношению к содержащему элементу.
.left { background-position: 20px 70px; /*Остальные стили такие же как для класса .top-left */ } .right { background-position: 50%; /*Остальные стили такие же как для класса .top-left */ }
Свойство background-origin определяет область позиционирования фонового изображения.
Доступные значения следующие:
border-box
– фон позиционируется относительно границы, при этом линия границы может перекрывать изображение,padding-box
– фон позиционируется относительно края элемента с учетом толщины границы,content-box
– фон позиционируется относительно содержимого элемента..left { background-origin: border-box; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat; background-position: top left; border: 10px dotted black; padding: 20px; } .middle { background-origin: padding-box; /*Остальные стили такие же как для класса .left*/ } .right { background-origin: content-box; /*Остальные стили такие же как для класса .left*/ }
Свойство background-clip определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
.left{ background-clip: border-box; background-size: 50%; background-color: #ffdb3a; background-repeat: no-repeat; background-position: top left; border: 10px dotted black; padding: 20px; } .middle { background-clip: padding-box; /*Остальные стили такие же как для класса .left*/ } .right { background-clip: content-box; /*Остальные стили такие же как для класса .left*/ }
И, наконец, свойство background является обобщающим для других свойств фона. Порядок подсвойств не имеет значения, так как типы данных для каждого свойства различны. Тем не менее, для background-origin и background-clip, если указано только одно значение, оно используется для обоих свойств. Если два, первое устанавливается для свойства background-origin.
© 2008 - 2024 Webmasters.BY Все права защищены
Новый комментарий