Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!
А также:
Позиционирование изображения в css
Основы позиционирования фона в CSS
Применение фоновых изображений к элементам — это, пожалуй, одна из наиболее часто используемых возможностей CSS, существует несколько свойств, позволяющих контролировать различные аспекты фоновых изображений.
Элемент может иметь больше одного фонового изображения. Если вы хотите применить несколько изображений в качестве фона, вы можете перечислить их через запятую в свойстве background-image. Свойство background-position используется для указания позиции фонового изображения, и это свойство достойно более глубокого рассмотрения, т.к. разные возможные значения могут приводить к разным результатам, некоторые особенности будут новыми для вас, особенно если вы не слишком глубоко погружены в CSS.
Чтобы сохранить код и понятия в статье простыми, мы будем рассматривать в примерах одно фоновое изображение. Но то, что относится к одному изображению, может также применяться к нескольким.
Фоновое изображение позиционируется внутри области, называемой областью позиционирования фона элемента. Область позиционирования фона, как следует из названия, определяет область, к которой может позиционироваться фон, она имеет систему координат для управления позиционированием.
Прежде чем мы дальше углубимся в концепцию позиционирования, давайте сначала быстро взглянем на CSS box model и посмотрим, как она влияет на позиционирование фоновых изображений внутри элемента.
CSS box model
Элемент в CSS имеет три области: border box, padding box и content box. Border box включает в себя область внутри границы элемента и площадь под самой границей.
Padding box — это область, включающая в себя внутреннюю область элемента и область, задаваемую свойством padding, но не включает границы.
Content box — это внутренная область элемента, не включающая область отбивки и границы.
Есть еще четвертая область, называемая margin box, которая включает в себя элемент и внешнюю область, задаваемую свойством margin.
Когда вы задаете фон элемента — будь то изображение или цвет — фон заполняет область padding box. (Такое поведение может быть изменено с помощью свойства background-origin, мы еще к нему вернемся).
Для того, чтобы указать положение фонового изображения внутри области, область должна иметь систему координат. Давайте рассмотрим подробнее эту систему координат прежде, чем двигаться дальше.
Система координат элемента
По умолчанию, благодаря природе блочной модели в CSS, каждый элемент имеет систему координат, установленную по его граням. Эта система кординат используется для позиционирования элемента относительно других элементов, а также для позиционирования дочерних элементов относительно текущего.
HTML-элементы имеет систему координат в CSS. SVG-элементы, напротив, не имеют похожей системы координат, поскольку не основываются на блочной модели.
Начало системы координат в CSS расположено в верхнем левом углу элемента.
Область позиционирования фона также имеет систему координат, которая используется для позиционирования фонового изображения в этой области. Эта система координат имеет свое начало в левом верхнем углу области позиционирования.
Поскольку обрастью позиционирования фона по умолчанию является padding box, начало системы координат области позиционирования фона по умолчанию расположено в верхнем левом углу padding box.
Это означает, что когда вы применяете фоновое изображение к элементу, браузер расположит первую копию, а затем повторяющиеся элементы, начиная с верхнего левого угла padding box.
Например, предположим, что у вас есть фоновое изображение, примененное к элементу, и вы не установите повтор фонового изображения (только один экземпляр этого изображения будет применен). Начальное положение фонового изображения будет находиться в начале координат системы координат padding box. Т.е., верхний левый угол изображения будет расположен в верхнем левом углу padding box. (См. пример ниже).
Используя свойство background-position, о котором мы поговорим в этой статье, мы можем изменить положение изображения внутри этой системы координат.
Но, как мы уже говорили, мы можем изменить область позиционирования фона, а это, в свою очередь, изменит точку отсчета, относительно которой будет размещаться фоновое изображение.
Изменение области позиционирования фона и системы координат с помощью свойства background-origin
Свойство background-origin используется, чтобы изменить точку отсчета, относительно которой будет располагаться фоновое изображение.
Оно может принимать три значения: padding-box (значение по умолчанию), content-box и border-box.
В зависимости от области позиционирования фона, которую вы выберете, будет меняться начало системы координат, и, соответственно, начальное положение фонового изображения.
Пример наглядно показывает разницу между различными значениями background-origin.
Для каждой области позиционирования фона, определенной с помощью background-origin, система координат «сдвигается» в угол этой области.
Далее, мы можем позиционировать фоновое изображение в этой системе координат с помощью свойства background-position.
Для простоты, мы не будем изменять область позиционирования фона по умолчанию в статье. Таким образом, во всех примерах фоновое изображение будет позиционироваться относительно padding box.
Позиционирование фонового изображения с помощью background-position
Мы видели в предыдущем разделе, что фоновое изображение позиционируется по умолчанию в левом верхнем углу области позиционирования. Это связано с тем, что значение свойство background-position по умолчанию имеет значение 0%, 0%.
По умолчанию, положение задается в процентах. Вы можете задавать как процентное значени, так и абсолютное значение, которое определяет смещение изображения от одной из четырех граней области позиционирования (верхней, правой, нижней и левой).
В дополнение к абсолютным и относительным значениям, есть также пять ключевых слов, которые можно использовать: top, right, bottom, left и center.
Положение может описываться указанием одного значения смещения (с помощью ключевого слова, в процентах, или числовым значением), двух значений смещения (сочетание двух из трех возможных значений), или четырех значений смещения (с помощью ключевых слов или числовым значением). (Мы поговорим о них более подробно в следующих разделах).
background-position: top left; background-position: 50px 30%; background-position: top 25%; background-position: right 10px bottom 20px; background-position: center center background-position: 10px 20px; background-position: 5em 2em; background-position: 75% 50%;Если указано только одно значение, второе считается равным center. Если вы указываете два значения, первое определяет смещение от левого края, т.е. горизонтальное положение, а второй является смещением вниз от верхнего края, то есть вертикальное положение.
background-position: 10% 50%; /* 10% of the width to the right, and 50% down from the top */ background-position: top; /* equivalent to `top center` */ background-position: 50px; /* equivalent to `50px center` */Вы можете смешивать и сочетать значения, комбинируя числовые значения с процентами и/или ключевыми словами. Следует обратить внимание, что может использоваться пара ключевых слов или комбинация ключевое слово — процентное/числовое значение, но пара процентное/числовое — ключевое слово некорректна. Так center left — это корректное значение, а 50% left — нет. Но значение left 50% корректно. Первое значение соответствует горизонтальному смещению, а второе — вертикальному.
На самом деле, ключевые слова — это сокращения для конкретных процентных значений. А именно: top эквивалентно смещению 0% от верхней границы, bottom эквивалентно смещению 100% от верхней границы, left эквивалентно смещению 0% от левой границы, right эквивалентно смещению 100% от левой границы и center эквивалентно смещению 50% в любом направлении (по вертикали или по горизонтали).
Давайте посмотрим, как работает каждый возможный вариант, а самое главное, рассмотрим фундаментальные различия между числовыми и процентными значениями. Разберем больше примеров.
Как работают абсолютные значения
При указании положения в абсолютных величинах, вы смещаете фоновое изображение относительно верхнего левого угла на заданное значение. Другими словами, фоновое изображение будет перемещено на заданное в background-position значение отновительно верхнего левого угла.
Лучший способ объяснить и понять — это визуализировать, поэтому ниже приведены два примера абсолютного позиционирования фонового изображения и то, как они интерпретируются браузером. В обоих примерах элемент имеет размер 100×80px.
Позиционирование фонового изображения с использованием абсолютных значений
Абсолютные значения могут быть отрицательными, в этом случае фоновое изображение будет смещено за границу элемента.
Пример, показывающий cмещение фонового изображения с помощью отрицательных значений
Попробуйте изменить значение background-position в примере ниже и посмотреть, как оно влияет на положение фонового изображения. Не забудьте попробовать отрицательные значения!
Как работают процентные значения
В отличие от абсолютных значений, которые смещают верхний левый угол фонового изображения на определенное расстояние, процентное значение X сдвигает точку X% ширины или высоты изображения в точку X% ширины или высоты контейнера.
К примеру, значение 0% 0% смещает точку 0% 0% изображения в точку 0% 0% области позиционирования фона. Значение 50% 70% сдвигает точку, расположенную на 50% ширины изображения правее левой границы и на 70% высоты ниже верхней границы в точку 50% 70% области позиционирования фона.
И снова визуальный пример объяснит это лучше всего. Обратите внимание, как значение позиции используется для получения точки фонового изображения, которая потом сопоставляется с точкой области позиционирования с теми же координатами.
Позиционирование фонового изображения с помощью процентных значений
Так же, как и в случае с абсолютными значениями, вы можете указывать отрицательные процентные значения, при этом фоновое изображение будет смещено в противоположную сторону. Так, значение −10% −30% сдвинет изображение на 10% влево отновительно левого края и на 30% вверх.
Поиграться с процентными значениями можно в примере .
Позиционирование в двух предыдущих примерах происходит по отношению к верхней и левой границам элемента. Теперь давайте посмотрим, как мы можем объединить ключевые слова со смещением (в процентах или числовым), чтобы указать положение фонового изображения относительно любой из четырех границ элемента.
Смещение относительно любой границы
В примерах из предыдущих разделов мы видели, как используются смещения относительно верхней и левой границы элемента — это поведение по умолчанию для положения, задаваемого одним или двумя значениями.
Если вы объедините ключевые слова с числовыми значениями, вы можете задать смещение также относительно правой и нижней границы области позиционирования.
Для этого нужно сначала указать имя границы, относительно которой будет задаваться смещение, и затем указать значение смещения (абсолютное или в процентах).
Рассмотрим следующие примеры такого синтаксиса:
background-position: top 1em right 3em; /* positions the background image 1em down the top edge and 3em left of the right edge */ background-position: right 1em bottom 1em; /* positions the background image 1em above the bottom edge and 1em to the left of the right edge */ background-position: left 20px bottom 50px;Если указаны только три значения из четырех — четвертое считается равным нулю.
Кое-что следует иметь в виду при использовании синтаксиса с четырьмя значенями: если указано три или четыре значения, то каждому числовому или процентному смещению должно предшествовать ключевое слово, которое определяет, относительно какой грани задано смещение. Например, background-position: bottom 10px right 20px означает смещение 10px вверх относительно нижней грани и 20px влево относительно правой грани. Если заданы три значения, смещение считается равным нулю. Если заданы два числовых значения и ключевое слово, такая позиция считается невалидной, а браузер использует значение по умолчанию 0% 0%.
Чтобы лучше разобраться с с этим, вы можете поиграться со значениями background-position в следующем примере. Начальное положение фонового изображения равно 0px от нижнего края и 2em от правого края.
Это особенно полезно, когда вам нужно расположить фоновое изображение на определенном расстоянии от нижнего и правого границ, это гораздо проще, чем вычислять относительные смещения от верхней и левой границ.
Размер, повторение, обрезка и многое другое!
Помните, что вы можете применить несколько фоновых изображений к элементу. Для каждого фонового изображения (при условии, что они заданы как список разделенных запятыми изображений в качестве значения свойства background-position), вы можете указать соответствующее значение background-position; несколько позиций также должны быть разделенны запятыми.
В общем, есть девять CSS-свойств, которые контролируют расположение, размер и изображение фона, в том числе краткая запись свойства background. Каждое свойство позволяет сделать одну вещь, а в сочетании они дают нам отличный контроль над тем, как применяются фоновые изображения для любого элемента в HTML. Я надеюсь, что эта статья полностью раскрывает как работает позиционирование фонового изображения в CSS.
В дополнение к основным свойствам фона, существует также дополнительное свойство, которое позволяет накладывать эффекты на фоновые изображения, подобные эффектам, — это свойство background-blend-mode. Если вы заинтересуетесь наложением эффектов в CSS, вы можете прочитать больше об этом здесь .
Я надеюсь, статья была полезной. Спасибо за чтение.
Пособие для начинающих по позиционированию фона в CSS
Перевод статьи A Primer To Background Positioning In CSS с сайта blogs.adobe.com, автор — Сара Суэйдан.
Применение фоновых изображений к элементам, вероятно, одна из самых востребованных возможностей в CSS, и есть множество фоновых свойств, которые позволяют нам управлять различными аспектами фона элемента.
У элемента может быть более одного фонового изображения. Если вы хотите применить более одного фонового изображения, то можете представить их в виде разделённого запятыми списка значений для свойства background-image. Свойство background-position используется для указания позиции фонового изображения, и это свойство стоит рассмотреть поглубже, т.к. его различные возможные значения приводят к разным результатам, некоторые из которых могут оказаться для вас в новинку, если вы не очень хорошо разбираетесь в CSS.
Мы будем позиционировать одно фоновое изображение во всех примерах, чтобы сохранить код и общие понятия простыми на протяжении всей статьи. Но что подходит для одного фонового изображения, то применимо и ко множественным.
Фоновое изображение позиционируется внутри того, что называется «областью позиционирования фона» элемента. Эта область позиционирования фона, как ясно из названия, указывает область, внутри которой будет позиционироваться фон, и у нее есть система координат, используемая для работы с позиционированием.
Прежде чем продолжить углубляться в основные понятия позиционирования, давайте сначала быстренько заглянем в боксовую модель CSS и посмотрим, как она влияет на позиционирование фоновых изображений внутри элемента.
Области боксовой модели CSS
У элемента в CSS определены три области, называемые боксами: border box (бокс по границы включительно), padding box (бокс по отступу) и content box (бокс по содержимому). border box – область элемента, которая включает всю его внутреннюю часть плюс область, которую занимают сами границы.
Padding box – область элемента, исключающая границу, но включающая контент элемента и окружающие его отступы – указанные при помощи свойства padding.
Content box – область, созданная контентом элемента, исключающая любые отступы и границы.
Области бокса элемента. Изображение взято из CSS-справочника на Codrops, статья про свойство background-origin.
Есть также четвёртая область — «margin box», включающая элемент и его внешние поля, которые указываются при помощи свойства margin.
Когда вы назначаете элементу фон в виде изображения или сплошного цвета, то по умолчанию он закрашивает всю область границы элемента. (Можно изменить это поведение при помощи свойства background-origin, но мы вернёмся к нему в ближайшее время.)
Чтобы указать, где именно внутри области позиционирования будет находиться фоновое изображение, этой области необходима система координат, используемая для преобразования в неё значений background-position. Прежде чем двигаться дальше, давайте повнимательнее рассмотрим эту систему координат.
Система координат элемента
По умолчанию, по самой природе боксовой модели элемента в CSS, у каждого элемента есть система координат, которая определяется его высотой и шириной. Эта система координат используется, чтобы позиционировать элемент относительно других элементов и позиционировать потомков элемента относительно него самого.
У HTML-элемента есть система координат в CSS. У SVG-элементов, напротив, нет похожей системы координат, поскольку они не регламентируются концепцией боксовой модели.
Начальная точка системы координат в CSS расположена в левом верхнем углу элемента.
Область позиционирования фона также определяется системой координат, установленной для нее, и служит для позиционирования фонового изображения в этой области. У этой системы координат начальная точка тоже находится в верхнем левом углу области позиционирования.
Поскольку по умолчанию областью позиционирования является padding box, то по умолчанию начальной точкой системы координат области позиционирования фона будет верхний левый угол области внутреннего отступа элемента.
Это означает, что, когда вы применяете фоновое изображение к элементу, браузер будет позиционировать первое и последующие повторения изображения, начиная от верхнего левого угла области внутреннего отступа элемента.
Например, предположим у вас есть фоновое изображение, применённое к элементу, и вы не задали ему повторение (поэтому применяется только один экземпляр этого изображения). Исходной позицией фонового изображения внутри системы координат будет начальная точка системы координат padding box. Поэтому верхний левый угол изображения позиционируется в верхнем левом углу внутреннего отступа элемента. (См. живой пример ниже.)
К элементу применена полупрозрачная граница в 20px. Заметьте, как изображение позиционируется в верхнем левом углу внутреннего отступа элемента.
Изображение любезно предоставлено Freepik.com
Используя свойство background-position, о котором мы поговорим в этой статье, мы можем изменять позицию изображения внутри этой системы координат.
Но как упоминалось ранее, мы можем изменить область позиционирования фона, и это, в свою очередь, изменит начальную точку, используемую для позиционирования изображения внутри области фона элемента.
Изменение области позиционирования фона и системы координат при помощи background-origin
Свойство background-origin применяется, чтобы изменить начальную точку системы координат, используемую, чтобы позиционировать фоновое изображение в области позиционирования фона.
Оно принимает одно из трёх значений: padding-box (значение по умолчанию), content-box и border-box.
В зависимости от выбора области позиционирования фона, соответствующей точке отсчета для фона — начальная точка системы координат, установленной для этой области — изменится, и начальное (по умолчанию) положение фонового изображения тоже.
Следующий живой пример показывает разные исходные точки фона/области позиционирования в действии.
Смотрите пример Сары Суэйден (@SaraSoueidan) «Разные значения background-origin» на CodePen.
Для каждой области позиционирования фона, указанной при помощи background-origin, система координат будет сдвигаться, чтобы покрыть эту область.
Затем, в этой системе координат можно указать положение фонового изображения, используя свойство background-position.
Ради простоты, в остальной части этой статьи, мы оставим область позиционирования фона элемента по умолчанию. Поэтому все наши примеры будут применены к элементу, у которого фон позиционируется именно в области отступа.
Позиционирование фоновых изображений при помощи background-position
В прошлом разделе мы видели, как фоновое изображение по умолчанию позиционируется в левом верхнем углу области позиционирования. Это связано с тем, что по умолчанию значение свойства background-position равно 0% 0%.
По умолчанию для background-position используются процентное значение. В background-position можно подставлять либо процентное, либо абсолютное значение, которые указывают смещение изображения от одного из четырёх краёв области позиционирования (вверх, право, низ, лево)
Углы смещения элемента и система координат в CSS.
В дополнение к процентным и абсолютным значениям, для смещения можно использовать ещё и пять ключевых слов: top, right, bottom, left и center.
Положение фона можно описывать при помощи указания одного значения для смещения (ключевое слово, проценты или длина), двух значений (пара значений с теми же тремя вариантами для каждого) или четырёх значений (ключевое слово и числовое значение смещения относительно соответствующего края). Мы поговорим об этом более детально в последующих разделах.
background-position: top left; background-position: 50px 30%; background-position: top 25%; background-position: right 10px bottom 20px; background-position: center center background-position: 10px 20px; background-position: 5em 2em; background-position: 75% 50%;Если вы укажите только одно значение, то второе будет считаться, как center. Если укажите два значения, то первое будет определять смещение от левого угла — т.е. горизонтальную позицию, а второе – смещение вниз от верхнего угла — вертикальную позицию.
background-position: 10% 50%; /* смещение на 10% вправо, и 50% вниз от верха */ background-position: top; /* идентично `top center` */ background-position: 50px; /* идентично `50px center` */Можно смешивать и сочетать значения, комбинируя длину с процентами и/или ключевыми словами. Заметьте, что пару ключевых слов можно поменять местами, тогда как комбинацию ключевого слова и длины либо процентов — нельзя. Поэтому center left — правильная запись, а 50% left — нет, она должна выглядеть так: left 50%. При комбинировании ключевого слова и длины или процентного значения, первое значение всегда отвечает за горизонтальное смещение, а второе — за вертикальное.
Собственно говоря, ключевое слово – это сокращённая запись для определённых процентных значений. Точнее сказать: top — смещение 0% от верхнего края, bottom — смещение 100% от верхнего края, left — смещение 0% от левого края, right — смещение 100% от левого края, а center — смещение 50% в том направлении (горизонтальном или вертикальном), к которому оно применяется.
Начнём с того, как работает каждый тип значения — вероятно, это наиболее важная вещь, т.к. есть фундаментальное различие между тем, как браузер позиционирует фоновые изображения при абсолютных и процентных значениях. По ходу изучения мы посмотрим больше примеров.
Как работают абсолютные значения background-position
При указании значения в абсолютных единицах, вы смещаете верхний угол фонового изображения на указанное число. Другими словами, изображение передвинется так, чтобы его верхний левый угол позиционировался на указанные в значении background-position смещения.
Лучший способ объяснить и понять это – показать наглядно, поэтому здесь представлено два примера абсолютных значений позиции фона и то, как браузеры реализуют позиционирование фонового изображения при помощи абсолютных значений. Элементу в этих двух примерах задан размер 100px на 80px.
Позиционирование фонового изображения при помощи абсолютных значений.
Абсолютное значение также может быть отрицательным. В этом случае изображение сместится в обратном направлении от края.
Пример, показывающий смещение изображения при помощи отрицательного значения.
Попробуйте изменить значения позиции фона в следующем живом примере, чтобы увидеть, как оно влияет на изображение. И обязательно попробуйте отрицательное значение!
Как работают процентные значения background-position
В отличие от значения смещения в абсолютных единицах длины, которое двигает верхний левый угол элемента на указанное расстояние, процентное значение выравнивает точку в X% от левого (для горизонтальной составляющей) или верхнего (для вертикальной) края изображения с точкой в X% от левого (для горизонтальной) или верхнего (для вертикальной) края контейнера.
Например, процентное значение 0% 0% выровняет точку 0% 0% изображении с точкой 0% 0% в системе координат области позиционирования фона. Значение 50% 75% свойства background-position выровняет точку, которая находится в 50% от левого и в 75% от верхнего края изображения с точкой, которая расположена на 50% 75% в области позиционирования фона.
И снова, лучше объяснит наглядный пример. Заметьте, как указанное значение background-position используется, чтобы получить точку этих координат внутри изображения, а затем выравнивает эту точку с точкой в тех же координатах в области позиционирования.
Позиционирование фонового изображения при помощи процентных значений..
Как и с абсолютными единицами длины, можно указать процентное смещение в отрицательных значениях, и они передвинут фоновое изображение на указанное значение в противоположенном направлении на соответствующей оси. Поэтому значения -10% -30% сместят изображение на 10% влево от левого края и на 30% вверх.
Поиграйте со значениями в следующем примере, чтобы увидеть, как меняется положение фонового изображения.
Смотрите пример Сары Суэйден (@SaraSoueidan) «background-position Example#2» на CodePen.
Позиционирование в предыдущих двух примерах делается относительно верхнего и левого краёв. Теперь давайте посмотрим, как можно объединить ключевые слова вместе с численными значениями смещения (процентами или абсолютными единицами), чтобы позиционировать изображения вдоль области позиционирования фона относительно любого из четырёх краёв элемента.
Смещение относительно любого края
В примерах из предыдущих двух разделов мы указывали смещения и видели, как они используются, чтобы переместить изображение относительно верхнего и левого края — т.е. поведение по умолчанию для одного или двух значений background-position.
Когда мы объединяем в четырёхзначный синтаксис ключевые слова для смещения с численными значениями, мы также можем сместить фоновое изображение от правого и нижнего краёв области позиционирования.
Чтобы это сделать, всё что нам надо, это указать название края, который нужно использовать, за которым должно следовать число (в абсолютных или процентных значениях), на которое сместится изображение от самого края.
Например, в следующем примере используется четырёхзначный синтаксис:
background-position: top 1em right 3em; /* фоновое изображение позиционируется на 1em вниз от верхнего угла и на 3em влево от правого угла */ background-position: right 1em bottom 1em; /* фоновое изображение позиционируется на 1em вверх от нижнего угла и 1em влево от правого угла */ background-position: left 20px bottom 50px;Если указано три из четырёх значений, четвёртое значение приравнивается к нулю.
При использовании четырёхзначного синтаксиса следует кое-что помнить: когда приведено три или четыре значения, тогда каждое процентное значение или длина представляют смещение и должны идти за ключевым словом, указывающим край, от которого должно смещаться фоновое изображение. Например, background-position: bottom 10px right 20px представляет вертикальное смещение на 10px вверх от нижнего края и горизонтальное смещение на 20px влево от правого края. Если указано три значения, недостающее смещение приравнивается к нулю. Если вы укажите два численных смещения и одно ключевое слово, то такое значение будет неверным и браузер использует 0% 0% — значение по умолчанию.
Чтобы лучше это понять, поиграйтесь со значениями свойства background-position в следующем живом примере. Для лучшего понимания фоновое изображение сначала позиционируется так, чтобы оно смещалось на 0 пикселей от нижнего и 2em от правого края.
Это особенно полезно, когда вам нужно по умолчанию позиционировать изображение на расстояние от правого и нижнего краёв, что сделает эту задачу намного легче, чем вынужденное высчитывание относительных смещений от верхнего и левого углов.
Установка размеров, повторение, обрезка изображений и многое другое!
Помните, что можно к элементу можно применять множественные фоновые изображения. Для каждого фонового изображения (представленных в виде списка изображений, разделённого запятыми в background-image) можно указать соответствующую фоновую позицию; множественные позиции также разделяются запятыми.
В общем, есть девять CSS-свойств, которые управляют раскладкой, позиционированием, определением размеров и закрашиванием фоновых изображений, включая сокращённое свойство background, которое используется для установки и сброса других сокращённых свойств. Каждое свойство позволяет делать что-нибудь одно, а вместе они дают нам отличный контроль над тем, как применять фоновые изображения к любому элементу в HTML.
Кроме того, теперь, помимо основных свойств для фона, есть и дополнительные свойства, которые позволяют применять к фоновым изображениям эффекты наложения, похожие на эффекты, доступные в редакторах типа Photoshop — в частности, свойство background-blend-mode. Если вам интересно изучить всё о наложении в CSS, то можете прочитать об этом в этой статье.
Я надеюсь, что эта статья оказалась для вас полезной. Спасибо за чтение.
Позиционирование фонового изображения в CSS
В свойстве background-position можно указывать угол, относительно которого позиционируется фоновое изображение.
element{ background: url(image.jpg) no-repeat; background-position: right 50px bottom 10px; }| background: url(image.jpg) no-repeat; background-position: right 50px bottom 10px; |
calc
Рассчитать нужную позицию для фонового изображения можно и с помощью калькулятора. Результат получится тот же самый.
element{ background: url(image.jpg) no-repeat; background-position: calc(100% - 50px) calc(100% - 10px); }| background: url(image.jpg) no-repeat; background-position: calc(100% - 50px) calc(100% - 10px); |
background-origin
Легко совместить фон с паддингами поможет свойство background-origin. Значением по умолчанию является padding-box, это означает, что фон растягивается на область самого контента и паддингов. Если же задать background-origin:content-box, фон покроет только область контента.
Курс CSS. Урок 24. Позиционирование фонового изображения.
Панель Управления
Курс CSS. Урок 24. Позиционирование фонового изображения.
Курс CSS. Урок 24. Позиционирование фонового изображения. Следующее свойство фоновых изображений, которое мы сейчас изучим - это позиционирование. Когда мы устанавливаем фоновую картинку, она устанавливается в левый верхний угол, и уже оттуда начинает размножаться, согласно установленным значениям свойства background-repeat. Позиционирование фонового изображения в нужное место блочного элемента достигается с помощью свойства background-position. © Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru24. Позиционирование фонового изображения.
Следующее свойство фоновых изображений, которое мы сейчас изучим - это позиционирование.Возможно, вы уже заметили, что когда мы устанавливаем фоновую картинку, она устанавливается в левый верхний угол, и уже оттуда начинает размножаться, согласно установленным значениям свойства background-repeat (см предыдущий урок).
Предположим, начальство посмотрело нашу работу в предыдущем уроке, в целом одобрело, но дало новое ценное указание: перед названием компании необходимо внедрить вот такой логотип:
Очевидно в селектор #div_css_024 h2 следует добавить свойство: background-image: url('images/logo.png'); В данном случае background-repeat у нас будет по умолчанию, и изображение будет повторяться по горизонтали и вертикали. Запрещаем повторение добавлением: background-repeat:no-repeat; Теперь изображение будет в единственном экземпляре, но оно находится в левом верхнем углу блочного элемента h2, это немного не там, где следует.Позиционирование фонового изображения в нужное место блочного элемента достигается с помощью свойства background-position:
| 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%. Значение по умолчанию равно 0% 0%. В нашем примере используем значения 33% 77%. |
| xpos ypos | Первое значение: позиция по горизонтали, второе значение: позиция по вертикали. Значение верхнего левого угла, как можно легко догадаться, равно 0 0. Для единиц измерения можно использовать пиксели (0px 0px) или другие по стандартам CSS. Если определить только одно значение, другое будет считаться равным 50%. Можно смешивать точные единицы измерения (пиксели) с процентами. В нашем примере используем значения 2px 10px. |
| inherit | Определяет, что свойство background-position будет наследоваться от родительского элемента. В нашем примере td наследует от своей tr. Пояснение: Один фоновый рисунок относится к tr (тот, что левее), другой - к td. |
background-position:16% 96%;
Ну, а если начальству вдруг положение логотипа не понравится, мы всегда можем его легко поменять, изменив значение свойства background-position в нужном классе. Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.css_024_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_024_001.zip ← скачайте пример, чтобы установить на свой сайт...***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Если вы планируете вернуться сюда позднее... Пожалуйста, запомните эту страничку -URL: http://kocby.ru/css/p024.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
***** Реклама *****
Посмотри в зеркало! Что там видно?
