Как сделать фоном картинку css: background-image | htmlbook.ru

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

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

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
} 

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;

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

.box {
  border-radius: 10px;
} 

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

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%;

background-position: 10% 50%; /* смещение на 10% вправо, и 50% вниз от верха */
background-position: top; /* идентично `top center` */
background-position: 50px; /* идентично `50px center` */

background-position: top 1em right 3em; /* фоновое изображение позиционируется на 1em вниз от верхнего угла и на 3em влево от правого угла */

background-position: right 1em bottom 1em; /* фоновое изображение позиционируется на 1em вверх от нижнего угла и 1em влево от правого угла */

background-position: left 20px bottom 50px;

будут иметь разные цвета фона:

h2 {
цвет фона: зеленый;
}

div {
цвет фона: светло-голубой;
}

p {
цвет фона:
желтый;
}

Попробуй сам »

---

Непрозрачность / прозрачность

Свойство непрозрачности определяет непрозрачность / прозрачность элемента.Может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:

Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы
наследуют ту же прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента.

---

Прозрачность с использованием RGBA

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

Из нашей главы о цветах CSS вы узнали, что вы можете использовать RGB в качестве значения цвета. Помимо RGB,
вы можете использовать значение цвета RGB с каналом alpha (RGB A ), который определяет непрозрачность цвета.

Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В
альфа Параметр — это число от 0,0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.

Пример

div {
background: rgba (0, 128, 0, 0.3) / * Зеленый фон с непрозрачностью 30% * /
}

Попробуй сам »

Использование фоновых изображений CSS · Документы WebPlatform

Сводка

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

Введение

Признайся! С момента появления первой статьи в учебной программе по веб-стандартам вы были взволнованы, узнав, как сделать свой сайт ярким и потрясающим. Может быть, вы даже перешли к этому разделу?

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

Как вы ранее узнали из предыдущей статьи в этой серии, одно из наиболее важных изменений, которое приходит с CSS, — это возможность отделить представление , , или то, как все выглядит, от семантики или того, что означают вещи.Фоновое изображение CSS является одним из наиболее важных инструментов, имеющихся в вашем распоряжении, поскольку оно позволяет применять декоративные изображения к определенным частям вашего HTML, не добавляя лишнего веса вашему HTML. Раньше авторы (как и вы!) Были вынуждены заполнять свой код тегами img для достижения того же эффекта.

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

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

Как это работает?

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

Во-первых, просмотрите различные свойства, которые вы можете использовать.

Свойства фона

цвет фона	Задает цвет фона элемента HTML.	Есть несколько способов указать background-color , включая значения RGB и ключевые слова. Большинство людей используют шестнадцатеричное представление, символ решетки (#), за которым следуют шесть символов. Первая пара указывает на красный уровень, а вторая и третья — на зеленый и синий уровни соответственно — #RRGGBB . Многие инструменты выбора цвета помогут вам найти шестнадцатеричное представление данного цвета. Чистый красный цвет, например, будет # FF0000. Допустимые значения включают значение цвет, , прозрачный, или наследуемый .
изображение	Указывает путь или URL фонового изображения.	Установите background-image , указав браузеру, где найти изображение, используя URL-адрес. Например; URL (alert.png) . Обратите внимание, что путь предваряется ключевым словом url и заключен в круглые скобки. Этот синтаксис важен для понимания браузером того, что вы хотите указать местоположение. Если ваш URL-адрес содержит специальные символы или пробелы, вам, возможно, придется использовать апострофы или кавычки вокруг URL-адреса внутри круглых скобок. Допустимые значения: URL , нет или наследует .
повтор	Указывает, в каком направлении следует расположить фоновое изображение.	Изображения можно расположить по вертикали, горизонтали или по обоим направлениям, чтобы заполнить всю ширину или высоту элемента HTML. Используйте background-repeat , чтобы указать браузеру повторять фоновое изображение. Допустимые значения включают повторений , повторений x , повторений y и без повторения .
насадка	Задает поведение фонового изображения при прокрутке пользователем.	Изображения могут либо прокручиваться вместе с содержимым, либо оставаться на месте на экране просмотра. Допустимые значения включают прокрутки , фиксированный и наследуемый .
позиция	Сообщает браузеру, где разместить фоновое изображение.	Изображения могут отображаться в любом месте в пределах HTML-элемента, к которому они применяются.Используйте background-position , чтобы точно разместить изображения для визуального эффекта и наложения слоев. Есть много полезных способов указать положение фона, ключевые слова и числовые значения. Ключевые слова (например, верхний и нижний ) очень полезны и легко читаются. Значения пикселей очень точны, но они не адаптируются к изменению высоты и ширины. Отрицательные значения пикселей полезны при использовании спрайтов CSS, как вы увидите позже. Когда используются проценты и пиксели, отправной точкой всегда является верхний левый угол элемента HTML, хотя способ позиционирования изображения работает с пикселями и процентами несколько иначе.Пиксели всегда перемещают изображение на заданное количество пикселей вниз и вправо от содержащего поля (или вверх и влево, если они имеют отрицательные значения), независимо от размера изображения и содержащего поля. С другой стороны, проценты перемещают изображение на процент разницы между размером содержащего поля и размером изображения. Если изображение и содержащее его поле имеют одинаковый размер, проценты не будут перемещать изображение вообще. Допустимые значения включают длину , (обычно в пикселях), процентов, (ширины элемента) и ключевые слова: верхний , правый , нижний , левый и центральный .Обратите внимание, что центр может использоваться для обозначения как вертикального, так и горизонтального центра. Также обратите внимание, что вы можете смешивать проценты и пиксели в правилах, но не ключевые слова и пиксели или ключевые слова и проценты.
фон	Сокращенное свойство, которое можно использовать для описания всех других свойств в одной строке.	Сокращенные свойства действительно очень хороши. Большинство разработчиков используют их, чтобы сделать CSS как можно более компактным и сгруппировать связанные свойства.Вы можете написать общее правило, используя сокращенную запись, а затем при необходимости переопределить его конкретными свойствами. Свойства всегда следует указывать в одном и том же порядке, чтобы браузеры могли легко интерпретировать предполагаемые стили: цвет URL повтор насадка (используется очень редко; может быть опущена) горизонтальное положение вертикальное положение Пример этого сокращения со всеми используемыми свойствами (кроме вложения ) выглядит следующим образом: фон: зеленый URL (логотип.gif) без повтора слева вверху;

Создание предупреждающего сообщения

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

Конструкция

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

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

Рис. 1. Макет окна с предупреждением, созданный графическим дизайнером.

Дизайнер также предоставил значок, который мы должны использовать, как показано на рисунке 2.

Рисунок 2: Значок предупреждения.

Код

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

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

Создание ловушки или селектора CSS.

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

Скопируйте следующий CSS и вставьте его в таблицу стилей:

  .alert {...}
  

Скопируйте следующий HTML-код и вставьте его в HTML-документ:

  

   Внимание!  Здесь находится текст нашего предупреждающего сообщения.
  

Приведенный выше код стилизует предупреждение с классом , а не с идентификатором , потому что это позволяет иметь более одного предупреждения на странице. Например, вы можете добавить предупреждения к элементу формы с несколькими потенциальными ошибками. Цель состоит в том, чтобы сделать ваш CSS как можно более гибким и ограничить элементы в соответствии с дизайном при создании содержимого HTML.

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

Примечание. Я намеренно выбрал , а не , чтобы ограничить предупреждение класса параграфами; окна предупреждений могут легко содержать и другие элементы. Вы должны оставить как можно больше гибкости в своем CSS.

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

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

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

  .alert {
  цвет фона: #FFFFCC;
}
  

Окно предупреждения теперь выглядит так, как показано на рисунке 3.

Рисунок 3: Окно предупреждения с добавленным цветом фона.

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

Затем вы можете добавить фоновое изображение к предупреждению. Путь к фоновому изображению должен быть заключен в url () , как показано в приведенном ниже коде. Добавьте выделенную строку в правило CSS:

  .alert {
  цвет фона: #FFFFCC;

  
  фоновое изображение: URL (alert.png);
}
  

Окно предупреждения теперь выглядит, как на Рисунке 4.

Рисунок 4: Фоновое изображение было добавлено, но мозаика выглядит неправильно.

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

Контроль повторения фона

Рис. 5. Как и фоновое изображение, эти плитки повторяются как по горизонтали, так и по вертикали.

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

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

  .alert {
  цвет фона: #FFFFCC;
  фоновое изображение: URL (alert.png);

  
  фон-повтор: без повторения;
}
  

Окно предупреждения теперь выглядит, как на Рисунке 6.

Рисунок 6: Окно предупреждения с единственной копией фонового изображения (без мозаики).

Кроме того, вы можете выбрать повторение в обоих направлениях (например, кухонная плитка) или в любом направлении. Градиенты часто повторяются по горизонтали или вертикали (см. Рисунок 7). Вам не нужно знать размер HTML-элемента; вы просто вырезаете часть своего градиента и настраиваете его повторение в желаемом направлении; либо x для горизонтали, либо y для вертикали. Узоры часто повторяются в обоих направлениях, а значки обычно не повторяются. Вы изучите background-repeat далее в следующем примере.

Рис. 7. Зеленовато-желтые плитки в этом примере повторяются только по горизонтали.

Затем взгляните на практический пример с моего сайта. Рисунок 8.

Рисунок 8: Повторяющийся пример с моего веб-сайта.

CSS, который я использовал для добавления этого декоративного эффекта, относительно прост. Я сделал фон повторяющимся по горизонтали, используя repeat-x :

.

  кузов {
    
    фон-повтор: повтор-х;
  }
  

Приложение

Атрибут вложения позволяет указать, как будет вести себя фон, когда пользователь прокручивает страницу вниз.Поведение по умолчанию — scroll , что заставляет фоновое изображение прокручиваться вместе с содержимым.

С другой стороны, установка background-attachment на fixed приводит к тому, что элемент застревает в окне браузера, поэтому он остается на том же месте при прокрутке содержимого внутри элемента, к которому он прикреплен. Это создает некоторые странные эффекты, которые будут очевидны только при прокрутке прикрепленного HTML-элемента. W3C использует его для обозначения статуса своих спецификаций.Например, изображение «Рекомендация кандидата W3C» вверху слева. Прокрутите страницу вниз и обратите внимание, что изображение остается в верхнем левом углу. Он прикреплен к элементу body , поэтому всегда виден.

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

  .alert {
  цвет фона: #FFFFCC;
  background-image: url (alert.png);
  фон-повтор: без повторения;

  
  фон-вложение: прокрутка;
}
  

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

Рисунок 9: Дисплей не изменился.

Размещение изображения

Позиционирование — это точная настройка, которая позволяет размещать фоновые изображения именно там, где нужно, как по горизонтали, так и по вертикали, внутри элемента HTML. Это свойство принимает ключевые слова и числовые значения, такие как верхний , центральный , правый , 100% , -10% , 50px и -30em .

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

Рисунок 10: Различные примеры положения фона с использованием ключевых слов, процентов и пикселей.

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

 .тревога{
  цвет фона: #FFFFCC;
  фоновое изображение: URL (alert.png);
  фон-повтор: без повторения;
  фон-вложение: прокрутка;

  
  background-position: 10px 10px;
}
  

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

Рисунок 11: Использование CSS-позиционирования для установки местоположения фонового изображения.

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

Используем стенографию, чтобы собрать все вместе, как профессионал

Как вы узнали, некоторые свойства CSS можно сгруппировать. Фон и все его подсвойства можно сгруппировать в правилах CSS. Код CSS, описанный до сих пор, можно переписать в сокращенной форме следующим образом:

 .тревога{
    
    фон: #FFFFCC url (alert.png) прокрутка без повтора 10px 10px;
  }
  

Совет: при группировании подсвойств фона всегда располагайте свойства в следующем порядке. Это важно как для кроссбраузерной совместимости, так и для организации и обслуживания таблиц стилей:

1. цвет
2. изображение
3. повтор
4. приставка
5. горизонтально позиция
6. вертикальное положение

Попробуйте заменить старый код CSS в своем документе сокращением, показанным выше.После обновления пример должен выглядеть точно так же (см. Рисунок 12).

Рисунок 12: Сокращение работает как шарм!

Экспериментируем с кодом

Лучший способ запомнить все нюансы CSS — это проверить параметры самостоятельно. Попробуйте изменить некоторые свойства в примере и посмотрите, как разные значения влияют на отображение. Установите background-position на 100% 100% и обратите внимание, что это дает тот же результат, что и использование ключевых слов right и bottom .А если вы измените его на -5px 0 ? Как вы думаете, почему часть изображения скрыта?

Контроль качества

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

• Увеличение или уменьшение количества текста внутри предупреждения.
• Увеличьте размер текста в браузере как минимум на два уровня.Определите, лучше ли использовать em для позиционирования нашего изображения. Проверьте, что происходит, когда вы увеличиваете размер текста.
• Примените предупреждение класса к другим элементам, таким как div , p , ul , strong или em . Как можно изменить код, чтобы сделать класс независимым?
• Включите несколько абзацев и список в предупреждение div . Код все еще работает?
• Визуально проверьте предупреждение в обозревателях 1-го уровня (также известных как обозреватели 1-го уровня).Мой совет — написать код для хороших браузеров, а затем адаптировать его для Internet Explorer — когда код заработает.

Строгое тестирование — это часть обучения написанию CSS. Чем внимательнее вы будете учиться, тем быстрее сможете писать код.

Спрайты

Пользователи хотят все. Они хотят, чтобы ваш сайт был гламурным, интерактивным и быстрым. Однако включение большого количества фоновых изображений CSS может значительно замедлить работу вашего сайта. Чем больше HTTP-запросов вы сделаете, тем медленнее будет работать ваш сайт (HTTP-запрос возникает всякий раз, когда ваш компьютер обращается к веб-сайту, и ему необходимо попросить сервер отправить ему другой ресурс в дизайне сайта, такой как файл CSS или изображение … каждый дополнительный запрос означает более длительное время загрузки сайта).

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

Обратите внимание, что на рисунке 13 для отображения значка Земли в окне HTML вы можете разместить изображение, используя слева вверху . Чтобы переместить изображение таким образом, чтобы отображался значок предупреждения, положение фона необходимо изменить на -80 пикселей 0 .Отрицательное значение по горизонтали смещает изображение влево.

Рисунок 13: Использование CSS-спрайтов для уменьшения количества HTTP-запросов.

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

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

Затем посмотрите, как можно использовать спрайты CSS.Предположим, дружелюбный дизайнер прислал нам новый макет. Это иллюстрирует список ссылок на целевой странице блога. Он указывает на профиль блоггеров в LinkedIn, RSS-канал, фотографии Flickr и закладки. При оценке каждой ссылки обратите внимание на градиент, начинающийся в центре с белого цвета и переходящий в серый вверху и внизу ссылки. И чтобы еще больше усложнить ситуацию, дизайнер спросил, можем ли мы сделать каждую ссылку простой белой без кривой, когда посетители наводят курсор на ссылку, как показано на рисунке 14.

Рисунок 14: Макет нового дизайна.

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

Создание спрайта

Первый шаг включает вырезание четырех логотипов и создание набора спрайтов, как показано на рисунке 15.

Рисунок 15: Набор спрайтов.

Также необходимо вырезать часть градиента шириной 1 пиксель. Для наглядности я вырезал немного больший фрагмент, но в реальном проекте сайта вам нужно только изображение в один пиксель (см. Рисунок 16).

Рисунок 16: Срез, используемый для градиентного фона.

HTML-код, который создает список, представляет собой неупорядоченный список, содержащий ссылки. Обратите внимание на пустые элементы span внутри ссылок. Очень важно не иметь фиксированных значений высоты и ширины для элементов, содержащих текст.В конце концов, вы не представляете, насколько большим будет текст. Что будет, если сайт переведут на немецкий язык? Вы можете использовать эти дополнительные промежутки для отображения логотипов. В качестве альтернативы вы можете решить, что не хотите, чтобы посторонняя несемантическая разметка загромождала ваш HTML. В этом случае вам нужно будет использовать спрайт большего размера и оставить пробел между значками. Имейте в виду, что эта стратегия медленнее для пользователей с медленным подключением, особенно для тех, кто использует мобильные телефоны для просмотра сайта. Код для списка показан ниже.Скопируйте его, а затем вставьте в документ HTML:

  

    

       Резюме 
    
    

       RSS-канал 
    
    

       Фотографии 
    
    

       Ссылки 
    
  
  

Добавьте следующий CSS-код в новый CSS-файл и свяжите его с HTML-документом:

 .навигация, .navigation li {
  маржа: 0;
  отступ: 0;
}

.navigation li {
  border-top: сплошной белый 1px;
  тип-стиль-список: нет;
}

.navigation li a {
  фон: # E2E2E2 url (sprite_gradient_bkg.jpg) repeat-x левый центр;
  отступ: 20 пикселей;
  дисплей: блок;
  семейство шрифтов: Arial, Helvetica, sans-serif;
  цвет: # 333;
  размер шрифта: 18 пикселей;
  текстовое оформление: нет;
}



.navigation li a: hover, .navigation li a: focus {
  фон: прозрачный - нет;
}
  

CSS использует оба фоновых изображения.Во-первых, взгляните на фоновое изображение градиента. Следует отметить три интересных момента:

1. Изображение повторяется по горизонтали ( повтор-x ). Эта мозаика позволяет вам сделать такое маленькое изображение растянутым по всему списку.
2. Изображение центрируется по вертикали. Вы хотите, чтобы круглая часть изображения отображалась в середине элемента списка, поэтому вам следует использовать позицию фона , левый центр .
3. В CSS я применил цвет фона того же серого, что и серый на градиентном изображении.Это гарантирует, что если элемент вырастет, он не будет выглядеть сломанным. Для получения дополнительной информации об этой технике я рекомендую прочитать Bulletproof Web Design Дэна Седерхольма.

Последняя строка означает, что элемент не должен отображать цвет фона или изображение, когда посетитель наводит на него курсор или фокусируется на элементе с помощью клавиатуры. Вам может быть интересно, почему я применил свойства фона к ссылке, а не к элементу списка. Ответ заключается в том, что Internet Explorer 6 и более ранние версии не поддерживают псевдоклассы, такие как hover , для элементов, отличных от ссылок.Я внес изменения в код, чтобы учесть это ограничение.

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

 

.navigation span {
  фон: url (sprite_logo.gif) без повтора слева вверху;
  высота: 15 пикселей;
  ширина: 15 пикселей;
  поле справа: 20 пикселей;
  дисплей: -moz-inline-box;
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
}
  

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

 

#rss span {
  background-position: -15px 0;
}

#photos span {
  background-position: -30px 0;
}

#links span {
  background-position: -45px 0;
}
  

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

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

Использование

  от 10.02.2014 в 15:00 центральное время:
  

hoffmant99 внес незначительные изменения, чтобы пример спрайта работал, хотя учащийся (читатель этой страницы) должен знать, что имена файлов не совпадают.Это можно исправить локально, изменив имя с «sprite_logo» на «sprite_l» и «sprite_gradient_bkg.jpg» на sprite_g.jpg ».

См. Также

Внешние ресурсы

Изображение предоставлено

Вопросы к упражнению

• Размер абзаца составляет 40 на 180 пикселей, а размер фонового изображения — 60 на 200 пикселей. Вы увидите изображение целиком или только его часть? Почему?

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

    blockquote {background: yellow url (quote.png) no-repeat scroll ____ ____;}
    

• Допустим, вы хотите, чтобы к каждому h3 в вашем документе с классом «вопрос» применялся градиентный узор. Вы бы использовали repeat-x , repeat-y , no-repeat или repeat для достижения чего-то похожего на пример ниже? Почему?

• Каким будет фоновое положение примера в вопросе номер 3? Как можно творчески использовать цвет фона, чтобы он мог расширяться до любой высоты? Почему это важно?
• Какое сокращение можно использовать для удаления всех свойств фона?
• Какова цель CSS-спрайтов?

Как ускорить фоновые изображения

Фоновые изображения обычно используются там, где есть текст или контент сверху.Это может быть слайдер, тематическое изображение сообщения в блоге (как показано ниже) или изображение главного героя.

Скорее всего, они загружаются медленно и могут повлиять на взаимодействие с пользователем из-за увеличения самой большой Contentful Paint (LCP), если они находятся в указанном выше сгибе.

Почему фоновое изображение медленное?

Запросы с низким приоритетом

Если изображение находится внутри внешнего файла CSS, оно будет загружено только после загрузки и анализа файла CSS и когда класс CSS фактически используется в HTML.

Это может отразиться в вашей основной веб-метрике, такой как Крупнейший Contentful Paint (FCP) , если эти фоновые изображения находятся в указанном выше сгибе.

Если это тег IMG, изображение загружается сразу после анализа HTML.

Трудно отложенная загрузка и предварительная загрузка

Теги

IMG могут использовать встроенную отложенную загрузку браузера, для которой не требуется JavaScript.

Вы все еще можете отложить загрузку фоновых изображений, если они в HTML как встроенный стиль.Плагины, такие как FlyingPress, автоматически обнаруживают и загружают их с отложенной загрузкой.

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

Примечание. Если вы используете FlyingPress, у нас есть вспомогательный класс « lazy-bg» для отложенной загрузки фоновых изображений даже внутри файлов CSS.

Как ускорить фоновые изображения?

Использовать тег IMG с подгонкой объекта

Фоновые изображения обычно используются в слайдерах с некоторым текстом / содержимым в центре, или у вас есть фиксированный div, и вы хотите разместить изображение, которое будет «заполняться» без изменения размера области ( background-size: cover ).

Раньше было очень сложно добиться этого с помощью тегов IMG. Так что использование фоновых изображений имело смысл.

Однако есть новое свойство CSS object-fit: cover , которое дает те же преимущества. Поддержка браузера тоже хороша.

Предварительная загрузка фонового изображения

Если вы используете фоновое изображение или тег IMG, если изображение находится в верхнем сгибе, предварительно загрузите это изображение. Предварительная загрузка указывает браузеру загрузить это изображение с высоким приоритетом.

Тег IMG с хаком «display: none»

Фоновые изображения могут использоваться вместе с background-color , background-repeat , background-attachment , background-position и background-blend-mode и т. Д.

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

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

Добавить адаптивные изображения

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

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

В противном случае вы получите одинаковое большое изображение для MacBook с разрешением 2880 пикселей и iPhone 6s с разрешением 750 пикселей!

Встроенное фоновое изображение в HTML

Если ваше фоновое изображение во внешнем файле CSS, встроите его в HTML.Таким образом, браузеру не нужно ждать загрузки этого CSS-файла, а затем загружать изображение.

Дополнительная литература

Учебное пособие по фоновому изображению CSS с примерами

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

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

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

И, если вы, как обычно, не любите читать, перейдите на наш канал Youtube, чтобы посмотреть видеоверсию.

Давайте посмотрим, что скрывается за фоном!

1. Как идеально подогнать фоновое изображение к области просмотра?

Давайте начнем с чего-то большего, чем уловки.Как часто с вами случалось, что вам приходилось бороться с вашим фоновым изображением, чтобы сделать его идеально подогнанным, не растянутым и непривлекательным?

Позвольте мне показать вам, как сделать так, чтобы ваше фоновое изображение всегда идеально вписывалось в окно вашего браузера!

**** 2. Как использовать несколько фоновых изображений с помощью CSS?

Хм, а что, если я хочу добавить более одного изображения в качестве фона?

Это возможно и не очень сложно, но может дать хороший результат, пока у вас есть идея соединить две графики во что-то красивое.

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

Посмотрим, как это работает!

3. Как создать треугольное фоновое изображение?

Еще один захватывающий трюк с фоновым изображением в CSS — треугольное фоновое изображение. Это создает действительно красивый эффект, особенно когда мы хотим показать совершенно разные варианты, такие как день и ночь, или зима и лето.

Это делается путем создания двух блоков div, оба для всего окна просмотра, затем необходимо добавить фоновое изображение к ним обоим, а затем второму div требуется свойство clip-path для создания треугольной формы.

Посмотрим код и результат!

**** 4. Как добавить градиент на фоновое изображение?

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

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

Давайте посмотрим, как легко добавить градиент на фоновое изображение!

**** 5. Как создать анимацию фонового изображения с изменением цвета?

А что, если вы можете решить, какой цвет лучше всего подходит для фонового изображения? Тогда действительно пригодятся анимации на фоновых изображениях.

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

Давайте посмотрим, что мы можем сделать, используя фоновые изображения и анимацию в CSS!

6. Как сделать сетку фонового изображения?

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

О, если вы не знаете, что такое CSS-сетка, посмотрите здесь.

Давайте взглянем!

7. Как установить фоновое изображение в качестве цвета текста?

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

Давайте посмотрим, какой потрясающий эффект мы можем получить!

Заключение

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

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

Спасибо за чтение,

Анна из Дуомли

Связанные показания 📖

Учебник по использованию анимированного CSS с примерами

Учебное пособие по созданию таблицы HTML

Граница CSS с примерами учебник

Анна Данилец

Анна Данилец окончила факультет управления бизнесом.В течение многих лет она получала солидный опыт в разработке клиентских и серверных интерфейсов, создавая программное обеспечение для известных ИТ-компаний.
Ее опыт в области ИТ — это React.JS, Angular, React Native, Flutter, Node.JS и Nest.JS.
В последние годы она вела бизнес для Duomly, уделяя особое внимание ИТ, а также интернет-маркетингу, дизайну и созданию контента, таким как ведение блогов и Youtube. В нерабочее время Анна ведет свой настоящий криминальный канал на YouTube, любит спорт, солнце и средиземноморскую кухню.

Подробнее об Анне Данилец

Если понравилось, делитесь и комментируйте!

Адаптивное фоновое изображение с использованием CSS

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

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

HTML

CSS

  .bg {
  высота: 100вх;
  минимальная высота: 500 пикселей;
  фоновое изображение: url (images / bg.jpeg);
  background-position: center center;
  фон-повтор: без повторения;
  background-attachment: исправлено;
  размер фона: обложка;
  цвет фона: # 1d3557;
}
  

• height: 100vh означает, что высота этого элемента bg составляет 100% высоты области просмотра
• min-height: 500px устанавливает минимальную высоту элемента
• background-position: center center всегда будет центрировать изображение по вертикали и горизонтали
• background-repeat: no-repeat предотвращает повторение изображения и создает мозаичный вид
• background-attachment: fixed сохраняет изображение фиксированным в области просмотра, поэтому даже при прокрутке вниз оно не перемещается.Создает эффект прокрутки параллакса, при котором фоновое содержимое перемещается с другой скоростью, чем содержимое переднего плана при прокрутке. При прокрутке это выглядит так, как будто остальная часть веб-сайта прокручивается поверх фонового изображения.
• background-size: cover изменит размер фонового изображения в соответствии с размером экрана
• background-color: # 1d3557 установит цвет фона, который будет отображаться во время загрузки фонового изображения

Этот код хорошо работал на ноутбуках, но на iPhone и iPad (не тестировался на других типах устройств) фоновое изображение было сильно увеличено, оставив меня с пиксельным изображением.

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

  / * Увеличение / уменьшение пикселей, если необходимо * /
/ * Для всех устройств с размером экрана меньше 1366 пикселей свойство background-attachment будет прокручиваться вместо фиксированного * /

@media only screen и (max-device-width: 1366px) {
  .bg {
    фон-вложение: прокрутка;
  }
}
  

Теперь вы должны видеть полное фоновое изображение на всех устройствах вместо пиксельного угла изображения!

Оптимизация фоновых изображений CSS с помощью медиа-запросов

5 марта 2020 г. • Обновлено 5 марта 2020 г.

Появляется в: Быстрое время загрузки

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

Предварительные требования #

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

Знакомство с адаптивными фоновыми изображениями #

Сначала проанализируйте сетевой трафик неоптимизированной демонстрации:

1. Откройте неоптимизированную демонстрацию на новой вкладке Chrome.
2. Нажмите Control + Shift + J (или Command + Option + J на Mac), чтобы открыть DevTools.
3. Щелкните вкладку Сеть .
4. Обновить страницу.

Вы увидите, что единственное запрошенное изображение — это background-desktop.jpg , размер которого составляет 1006 КБ :

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

Вы можете увидеть стили, управляющие фоновым изображением, в style.css:

  body {
 background-position: center center; 
 background-attachment: исправлено; 
 фон-повтор: без повтора; размер фона: обложка; 
 background-image: url (images / background-desktop.jpg); 
}  

Вот значение каждого из используемых свойств:

• background-position: center center : центрировать изображение по вертикали и горизонтали.
• background-repeat: no-repeat : показать изображение только один раз.
• background-attachment: fixed : Избегайте прокрутки фонового изображения.
• background-size: cover : Измените размер изображения, чтобы покрыть весь контейнер.
• background-image: url (images / background-desktop.jpg) : URL-адрес изображения.

В сочетании эти стили предписывают браузеру адаптировать фоновое изображение к разной высоте и ширине экрана. Это первый шаг к созданию отзывчивого фона.

Использование одного фонового изображения для всех размеров экрана имеет некоторые ограничения:

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

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

Использование медиазапросов — распространенный метод объявления таблиц стилей, которые будут применяться только к определенным типам носителей или устройств.Они реализуются с помощью правил @media, которые позволяют вам определять набор точек останова, в которых определены определенные стили. Когда выполняются условия, определенные правилом @media (например, определенная ширина экрана), будет применена группа стилей, определенных внутри точки останова.

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

• В стиле .css удалить строку, содержащую фоновое изображение URL:

  body {
 background-position: center center; 
 background-attachment: исправлено; 
 фон-повтор: без повтора; размер фона: обложка; 
  background-image: url (images / background-desktop.jpg);  
}  

• Затем создайте точку останова для каждой ширины экрана на основе общих размеров в пикселях, которые обычно имеют экраны мобильных устройств, планшетов и настольных компьютеров:

Для мобильных устройств:

  @media (max-width : 480px) {
 body {
 background-image: url (images / background-mobile.jpg); 
} 
}  

Для планшетов:

  @media (min-width: 481px) и (max-width: 1024px) {
 body {
 background-image: url (images / background-tablet.jpg); 
} 
}  

Для настольных устройств:

  @media (min-width: 1025px) {
 body {
 background-image: url (images / background-desktop.jpg); 
} 
}  

Откройте оптимизированную версию style.css в своем браузере, чтобы увидеть внесенные изменения.

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

Измерение для разных устройств #

Затем визуализируйте получившийся сайт на экранах разных размеров и на смоделированных мобильных устройствах:

1. Откройте оптимизированный сайт на новой вкладке Chrome.
2. Сузьте область просмотра (менее 480 пикселей ).
3. Нажмите Control + Shift + J (или Command + Option + J на Mac), чтобы открыть DevTools.
4. Щелкните вкладку Сеть .
5. Обновить страницу. Обратите внимание, как запрашивалось изображение background-mobile.jpg .
6. Расширьте область просмотра. Как только он станет шире 480px , обратите внимание, что запрашивается background-tablet.jpg . Как только он станет шире 1025px , обратите внимание, что запрашивается background-desktop.jpg .

При изменении ширины экрана браузера запрашиваются новые изображения.

В частности, когда ширина меньше значения, определенного в мобильной точке останова (480 пикселей), вы увидите следующий сетевой журнал:

Размер нового мобильного фона на на 67% меньше, чем у настольного компьютера.

Сводка #

В этом руководстве вы научились применять медиа-запросы для запроса фоновых изображений, адаптированных к определенным размерам экрана, и экономии байтов при доступе к сайту на небольших устройствах, например мобильных телефонах.Вы использовали правило @media для реализации адаптивного фона. Этот метод широко поддерживается всеми браузерами. Новая функция CSS: image-set (), может использоваться для той же цели с меньшим количеством строк кода. На момент написания этой статьи эта функция поддерживается не во всех браузерах, но вы, возможно, захотите следить за тем, как развивается принятие, поскольку она может представлять интересную альтернативу этому методу.

Последнее обновление: 5 марта 2020 г. Улучшить статью

Как разместить фоновые изображения с помощью CSS | by aliceyt

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

Чтобы изменить положение изображения, я добавляю свойство background-position и добавляю center , top , bottom , left и right в качестве значений.Ниже приведены снимки экрана, на которых показано, как положение изображения изменяется при применении разных значений:

В этом случае, когда мое изображение отображается в полную высоту (или близко к ней), центрирование изображения по оси Y не имеет никакого эффекта. Следовательно, когда я использую background-position: center, background-position: top и background-position: bottom, я эффективно использую background-position: center center.

слева

• Ось X: Изображение расположено напротив левого края контейнера, и обрезка начинается с справа .
• Ось Y: Изображение по центру.

справа

• Ось X: Изображение расположено напротив правого края контейнера, и обрезка начинается с справа .
• Ось Y: Изображение по центру.

сверху

• Ось X: Изображение по центру.
• Ось Y: Изображение расположено напротив верхнего края контейнера, и обрезка начинается с нижнего .

снизу

• Ось X: Изображение по центру.
• Ось Y: Изображение расположено напротив нижнего края контейнера, и обрезка начинается с верхнего .

по центру

• Ось X: Изображение по центру.
• Ось Y: Изображение по центру.

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

Помимо использования таких ключевых слов, как center , top , bottom , left и right в качестве значений, я могу использовать проценты или другие единицы CSS для более точного корректировки.