Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

январь 2021
Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31


Чувашия-это моя Россия

Размещение изображений в CSS.

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

Свойство background-position. Значения:

                    процент длина left center right
                    
                    процент длина top center bottom
                    
                    left center right
                    
                     top center bottom
                     
                     inherit

Начальное значение: o% o% /* то же, что left top */. Применимо: Ко всем элементам. Наследуется: Нет.

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

Использование ключевых слов.

Ключевые слова для указания положения - это left, right, top, bottom и center. Каждое из приведенных значений (кроме последнего) «привязывает» соответствующий край рисунка к нужному из краев элемента. Например, left располагает левый край иллюстрации по левому краю фона. Значение center центрирует изображение в элементе. И так далее.

Обычно ключевые слова, как в следующих примерах, используются попарно:

                     
                            {
                              background-position: left top;
                              
                              }

                            {
                              background-position: right center;
                              }

                            {
                              background-position: center bottom;
                              }

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

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

                           {
                               background-position: right;
                             }


                           {
                               background-position: bottom;
                             }

Единицы длины.

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

                          {
                               background-position: 150px 50px;
                            }


                           {
                           background-repeat: no-repeat;
                            }

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

Главное при вызове свойства background-image не забывайте назначить свойству размножения background-repeat: no-repeat. Иначе у Вас весь фоновый элемент заполнит вызванное изображение.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: