Содержание

Как изменить размер фоновой картинки через CSS3

Оригинал: sitepoint.com/css3-background-size-property

Перевод: Влад Мержевич

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.

Абсолютное изменение размера

Могут применяться единицы измерения.

background-size: ширина высота;

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

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

background-size: 100px 200px;

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

background-size: 100px;
  /* аналогично */
background-size: 100px auto;

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

background-size: 50% auto;

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

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

background-size: contain;

Заполнение фоном

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

background-size: cover;

Масштабирование нескольких фонов

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

background:
  url("sheep.png") 60% 90% no-repeat,
  url("sheep.png") 40% 50% no-repeat,
  url("sheep.png") 10% 20% no-repeat #393;
  background-size: 240px 210px, auto, 150px;

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

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

Просмотр демонстрационной страницы с background-size.

background-size | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.5+3.0+3.6+2.1+1.0+

Краткая информация

Версии CSS

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

Значения

<значение>
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
<проценты>
Задает размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-size</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    border: 2px solid #000; /* Параметры рамки */
    background: url(images/mybg.png) 100% 100% no-repeat; /* Добавляем фон */
    background-size: cover; /* Масштабируем фон */
   }
  </style>
 </head>
 <body>
  <div>...</div>
 </body>
</html>

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size.

Opera до версии 10.53 использует нестандартное свойство -o-background-size.

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.

Положение и размер фоновой картинки, объясняет атрибут background-size

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

Это в основном демонстрация значения атрибута background-size

  1. Используется изображение размером 400 * 640
  2. Старые правила, прямая визуализация кода, каждый может понять
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Положение и размер фоновой картинки, пояснение каждого атрибута</title>
    <style>
        .bgimg1{
            width: 300px;
            height: 300px;
            border: 3px solid #ccc;
            background: url(img/1.jpg) no-repeat;
            background-size: cover;
        }
        .bgimg2{
            width: 300px;
            height: 300px;
            border: 3px solid #ccc;
            background: url(img/1.jpg) no-repeat center center;
            background-size: cover;
        }
        .bgimg3{
            width: 300px;
            height: 300px;
            border: 3px solid #ccc;
            background: url(img/1.jpg) no-repeat;
            background-size: contain;
        }
        .bgimg4{
            width: 300px;
            height: 300px;
            border: 3px solid #ccc;
            background: url(img/1.jpg) no-repeat center center;
            background-size: contain;

        }
        .bgimg5{
            width: 300px;
            height: 300px;
            border: 3px solid #ccc;
            background: url(img/1.jpg) no-repeat;
            background-size: 100% 100%;

        }
    </style>
</head>
<body>


<div></div>
<br/>
<br/>
<div></div>
<br/>
<br/>
<div></div>
<br/>
<br/>
<div></div>
<br/>
<br/>
<div></div>
<br/>
<br/>
</body>
</html>

Как установить фоновую картинку на весь экран?

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

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

Пример смотрим здесь

CSS

body {
    background: url(img.jpg) no-repeat; 
	background-size:100%;
   }

Смотрим в браузер

На заметку

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

В каких браузерах работает?
9.0+ 3.0+ 9.6+ 3.1+ 3.6+ 2.0+ 2.0+

Оценок: 3 (средняя 5 из 5)

  • 2127 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

size — свойство css :: руководство cssdot.ru

Свойство background-size позволяет указывать размеры фонового изображения, которые могут быть заданы в абсолютных величинах (cm, mm, in и т.д.), относительных (px, em и т.д.), или в процентах, по отношению к ширине и высоте элемента контейнера. Так как для элемента может быть указанно несколько фоновых картинок, то и с помощью данного свойства можно указать размеры для нескольких картинок — они последовательно перечисляются через запятую.  Масштабировать фоновое изображение возможно как с сохранением исходных пропорций, так и без них.

Допустимые значения

  • length{1,2} — задает размер фонового изображения в абсолютных величинах (cm, mm, in и т.д.) или относительных (px, em и т.д.). Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки. Первое значение отвечает за ширину картинки, второе — за высоту. Отрицательные значения запрещены.
  • percentage{1,2} — задает размер фонового изображения в процентах от ширины и/или высоты элемента контейнера. Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки. Первое значение отвечает за ширину картинки, второе — за высоту. Отрицательные значения запрещены.
  • auto{1,2} — задает размер фонового изображения равным исходному, в случае, если указаны обе величины auto, или просто auto; а если указан только для одной стороны картинки (25% auto), то размер вычисляется исходя из пропорций картинки. Первое значение отвечает за ширину картинки, второе — за высоту. 
  • cover — масштабирует картинку с сохранением пропорций по меньшей стороне, то есть так, чтобы фон с избытком покрывал блок-контейнер.
  • contain — масштабирует картинку с сохранением пропорций по большей стороне, то есть так, чтобы блок-контейнер с избытком покрывал фон.

Примечания

Это свойство описанно в CSS3 модуле CSS Backgrounds and Borders Module Level 3.

Примеры использования

 

Свойство background-size определено в спецификации CSS 3 модуль Backgrounds and Borders Level 3 (фон и рамки, уровень 3), применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение auto. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

  • -o-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
  • -moz-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
  • -webkit-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.

Краткое описание

Размер фонового изображения, или его масштаб относительно элемента-контейнера.

Синтаксис:

[ <length> | <percentage> | auto ]{1,2} | cover | contain [, [ <length> | <percentage> | auto ]{1,2} | cover | contain]*

По умолчанию:

auto

Применяется к:

всем элементам

Наследование:
не наследуется
Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style.backgroundSize


Кроссбраузерная совместимость

Internet Explorer
Firefox
2.03.03.53.64.05.06.07.08.09.010.011.012.013.0
++++++++++
Chrome
1.02.03.04.15.06.07.08.09.010.011.012.013.014.015.016.017.018.019.020.0
+++++++++++++++++
Safari
1.01.11.21.32.03.03.24.05.0
+
Opera
8.59.29.59.610.110.510.611.011.111.511.6
+++++

Россия напала на Украину!

Россия напала на Украину!

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

Всем нам, украинцам, россиянам и всему миру правительство России врало последние два месяца. Нам говорили, что войска на границе “проходят учения”, что “Россия никого не собирается захватывать”, “их уже отводят”, а мирное население Украины “просто смотрит пропаганду”. Мы очень хотели верить вам.

Но в ночь на 24-ое февраля Россия напала на Украину, и все самые худшие предсказания  стали нашей реальностью .

Киев, ул. Кошица 7а. 25.02.2022

 Это не 1941, это сегодня. Это сейчас. 
Больше 5 000 русских солдат убито в не своей и никому не нужной войне
Более 300 мирных украинских жителей погибли
Более 2 000 мирных людей ранено

Под Киевом горит нефтебаза – утро 27 февраля, 2022.

Нам искренне больно от ваших постов в соцсетях о том, что это “все сняли заранее” и “нарисовали”, но мы, к сожалению, вас понимаем.

Неделю назад никто из нас не поверил бы, что такое может произойти в 2022.

Метро Киева, Украина — с 25 февраля по сей день

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

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

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

ул. Лобановского 6а, Киев, Украина. 26.02.2022

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

P.S. К сожалению, это не “фотошоп от Пентагона”, как вам говорят. И да, в этих квартирах находились люди.

«Это не война, а только спец. операция.»

Это война.

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

«Россия хочет только защитить ЛНР и ДНР.»

Это не так.

Все это время идет обстрел городов во всех областях Украины, вторые сутки украинские военные борются за Киев.

На карте Украины вы легко увидите, что Львов, Ивано-Франковск или Луцк – это больше 1,000 км от ЛНР и ДНР. Это другой конец страны. 25 февраля, 2022 – места попадания ракет

25 февраля, 2022 – места попадания ракет «Мирных жителей это не коснется.»

Уже коснулось.

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

Больше 1,200 мирных людей ранены или погибли. Среди них много детей.
Под обстрелы уже попадали в детские садики и больницы.
Мы вынуждены ночевать на станциях метро, боясь обвалов наших домов.
Наши жены рожают здесь детей. Наши питомцы пугаются взрывов.

«У российских войск нет потерь.»

Ваши соотечественники гибнут тысячами.

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

«В Украине – геноцид русскоязычного народа, а Россия его спасает.»

Большинство из тех, кто сейчас пишет вам это письмо, всю жизнь говорят на русском, живя в Украине.

Говорят в семье, с друзьями и на работе. Нас никогда и никак не притесняли.

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

«Украина во власти нацистов и их нужно уничтожить.»

Сейчас у власти президент, за которого проголосовало три четверти населения Украины на свободных выборах в 2019 году. Как у любой власти, у нас есть оппозиция. Но мы не избавляемся от неугодных, убивая их или пришивая им уголовные дела.

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

Украинские семьи потеряли больше 1,377,000 родных, борясь с нацизмом во время Второй мировой. Мы никогда не выберем нацизм, фашизм или национализм, как наш путь. И нам не верится, что вы сами можете всерьез так думать.

«Украинцы это заслужили.»

Мы у себя дома, на своей земле.

Украина никогда за всю историю не нападала на Россию и не хотела вам зла. Ваши войска напали на наши мирные города. Если вы действительно считаете, что для этого есть оправдание – нам жаль.

Мы не хотим ни минуты этой войны и ни одной бессмысленной смерти. Но мы не отдадим вам наш дом и не простим молчания, с которым вы смотрите на этот ночной кошмар.

Искренне ваш, Народ Украины

CSS — background-size

Масштабирует фоновое изображение согласно заданным размерам.

Краткая информация

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис ?

background-size: <bg-size> [, <bg-size> ]*

<bg-size> = [ <размер> | <проценты> | auto ]{1,2} | cover | contain

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

<размер>
Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>
Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-size</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    border: 2px solid #000; /* Параметры рамки */
    background: url(images/mybg.png) 100% 100% no-repeat; /* Добавляем фон */
    background-size: cover; /* Масштабируем фон */
   }
  </style>
 </head>
 <body>
  <div>...</div>
 </body>
</html>

Объектная модель

Объект.style.backgroundSize

Примечание

Safari до версии 4.1, Chrome до версии 3.0 и Android используют свойство -webkit-background-size.

Opera до версии 10.53 использует свойство -o-background-size.

Firefox до версии 4 использует свойство -moz-background-size.

Opera 9.5 некорректно устанавливает положение фиксированного фона.

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные    

?
Internet ExplorerChromeOperaSafariFirefox
913910.5334.13.64
AndroidFirefox MobileOpera MobileSafari Mobile
2.314115.1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Цвет и фон

Стиль HTML DOM backgroundSize Свойство

Пример

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

document.getElementById(«myDIV»).style.backgroundSize = «60px 120px»;

Попробуйте сами »

Определение и использование

Свойство backgroundSize задает или возвращает размер фоновых изображений.


Поддержка браузера

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

Собственность
backgroundSize 4,0 9,0 4,0 4.1 10,5

Синтаксис

Вернуть свойство backgroundSize:

объект .style.backgroundSize

Установить свойство backgroundSize:

объект .style.backgroundSize = «auto| длина |обложка|содержать|начальный|наследовать»

Значения свойств

. . .
Значение Описание
авто Значение по умолчанию. Фоновое изображение содержит ширину и высоту
длина Задает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, для второго устанавливается значение «авто»
процент Задает ширину и высоту фонового изображения в процентах от родительского элемента.Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, для второго устанавливается значение «авто»
крышка Масштабируйте фоновое изображение как можно больше, чтобы область фона полностью закрывалась фоновым изображением. Некоторые части фонового изображения могут быть не видны в области позиционирования фона 90 030
содержат Масштабируйте изображение до максимального размера, чтобы его ширина и высота могли поместиться в области содержимого
начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Технические детали

Значение по умолчанию: авто
Возвращаемое значение: Строка, представляющая свойство background-size элемента
Версия CSS CSS3

Связанные страницы

Ссылка CSS: свойство background-size



background-size — CSS: каскадные таблицы стилей

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

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

 
размер фона: обложка;
размер фона: содержит;



размер фона: 50%;
размер фона: 3.2em;
размер фона: 12px;
размер фона: авто;



размер фона: 50% авто;
размер фона: 3em 25%;
размер фона: авто 6px;
размер фона: авто авто;


размер фона: авто, авто;
размер фона: 50%, 25%, 25%;
размер фона: 6px, авто, содержать;


размер фона: наследовать;
размер фона: начальный;
размер фона: вернуться;
размер фона: не установлен;
  

Свойство background-size указывается одним из следующих способов:

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

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

Значения

содержат

Максимально масштабирует изображение внутри его контейнера, не обрезая и не растягивая изображение.Если контейнер больше изображения, изображение будет мозаичным, если для свойства background-repeat не установлено значение no-repeat .

крышка

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

авто

Масштабирует фоновое изображение в соответствующем направлении, сохраняя его внутренние пропорции.

<длина>

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

<процент>

Растягивает изображение в соответствующем измерении до указанного процента области позиционирования фона . Область позиционирования фона определяется значением background-origin (по умолчанию поле заполнения).Однако, если значение фона background-attachment равно fixed , область позиционирования вместо всего окна просмотра. Отрицательные значения не допускаются.

Внутренние размеры и пропорции

Вычисление значений зависит от внутренних размеров изображения (ширина и высота) и внутренних пропорций (отношение ширины к высоте). Эти атрибуты следующие:

  • Растровое изображение (такое как JPG) всегда имеет собственные размеры и пропорции.
  • Векторное изображение (например, SVG) не обязательно имеет внутренние размеры. Если он имеет как горизонтальные, так и вертикальные внутренние размеры, он также имеет внутренние пропорции. Если у него нет измерений или только одно измерение, оно может иметь пропорции, а может и не иметь.
  • CSS <градиент> s не имеют внутренних размеров или внутренних пропорций.
  • Фоновые изображения, созданные с помощью функции element() , используют внутренние размеры и пропорции генерирующего элемента.

Примечание: В Gecko фоновые изображения, созданные с помощью функции element() , в настоящее время обрабатываются как изображения с размерами элемента или области позиционирования фона, если элемент SVG, с соответствующей внутренней пропорцией. Это нестандартное поведение.

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

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

    Примечание. SVG-изображения имеют атрибут saveAspectRatio , который по умолчанию эквивалентен contains ; явный background-size приводит к игнорированию saveAspectRatio .

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

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

Работа с градиентами

Если вы используете в качестве фона и указываете для него background-size , лучше не указывать размер, который использует одиночный компонент auto или указывается с использованием только значения ширины ( например, background-size: 50% ). Рендеринг s в таких случаях изменился в Firefox 8 и в настоящее время, как правило, несовместим в разных браузерах, которые не все реализуют рендеринг в полном соответствии со спецификацией CSS3 background-size и градиентом CSS3 Image Values. Технические характеристики.

  .градиент-пример {
  ширина: 50 пикселей;
  высота: 100 пикселей;
  фоновое изображение: линейный градиент (синий, красный);

  
  размер фона: 25px;
  размер фона: 50%;
  размер фона: авто 50px;
  размер фона: авто 50%;

  
  размер фона: 25px 50px;
  размер фона: 50% 50%;
}
  

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

Исходное значение auto auto
Применяется ко всем элементам . Это также относится к ::first-letter и ::first-line .
8 Унаследованные NO
относительно фонового расположение площадь
8 Вычисленное значение Как указано, но с относительными длинами преобразованы в абсолютные длины
8 анимация типа повторяющийся список простого списка длины, процента или вычисления

Мозаика большого изображения

Давайте рассмотрим большое изображение, изображение логотипа Firefox размером 2982×2808.Мы хотим объединить четыре копии этого изображения в элемент размером 300×300 пикселей. Для этого мы можем использовать фиксированное значение background-size в 150 пикселей.

HTML
  <дел>
УСБ
  .tiledBackground {
  фоновое изображение: URL (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: 150 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
}
  
Результат

Дополнительные примеры см. в разделе Изменение размера фоновых изображений.

Таблицы BCD загружаются только в браузере

Установить размер фонового изображения с помощью CSS?

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

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

Это можно сделать в CSS3 с размером фона .

Все современные браузеры поддерживают это, поэтому, если вам не нужно поддерживать старые браузеры, это способ сделать это.
Поддерживаемые браузеры:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (веб-кит 532) и Chrome 3.0+.

  .стрейч{
/* Будет растягиваться до указанной ширины/высоты */
  размер фона: 200px 150px;
}
.stretch-контент {
/* Растянется до ширины/высоты элемента */
  размер фона: 100% 100%;
}

.изменить размер ширины{
/* ширина: 150 пикселей, высота: авто для сохранения соотношения сторон */
  размер фона: 150 пикселей Авто;
}
.resize-высота {
/* высота: 150 пикселей, ширина: авто для сохранения соотношения сторон */
  размер фона: Авто 150 пикселей;
}
.resize-fill-and-clip{
  /* Измените размер, чтобы заполнить и сохранить соотношение сторон.
     Вызывает отсечение, если соотношение сторон окна отличается от изображения. */
  размер фона: обложка;
}
.resize-best-fit{
/* Изменение размера для наилучшего соответствия и сохранения соотношения сторон.
   Вызывает разрыв, если соотношение сторон окна отличается от изображения.*/
  размер фона: содержит;
}
  

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

Раунд

Вы также можете использовать background-size: round , которые имеют значение в сочетании с повторением:

  .resize-best-fit-in-repeat{
/* Изменяем размер для наилучшего размещения целое число раз в направлении x */
  background-size: круглый авто; /* Высота: авто для сохранения соотношения сторон */
  фоновый повтор: повтор;
}
  

Это отрегулирует ширину изображения, чтобы оно соответствовало целому числу раз в области позиционирования фона.


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

background-size · Документы WebPlatform

Резюме

Задает размер фоновых изображений.

Обзорная таблица

Исходное значение
авто
Относится к
Все элементы
Унаследовано
Нет
СМИ
визуальный
Расчетное значение
для <длины> абсолютное значение, иначе процент
Анимируемый
Да
Свойство объектной модели CSS
backgroundSize
Проценты
см. текст

Синтаксис

  • размер фона: авто
  • размер фона: содержит
  • размер фона: обложка
  • размер фона: длина
  • размер фона: процент

Значения

авто
По умолчанию.См. Примечания.
содержат
Масштабируйте изображение, сохраняя его собственное соотношение сторон (если оно есть), до максимального размера, чтобы его ширина и высота могли поместиться в области позиционирования фона.
крышка
Масштабируйте изображение, сохраняя при этом его внутреннее соотношение сторон (если оно есть), до наименьшего размера, чтобы его ширина и высота могли полностью покрыть область позиционирования фона.
длина
Число с плавающей запятой, за которым следует обозначение абсолютных единиц ( cm , mm , in , pt или pc ) или обозначение относительных единиц ( em , ex пикс. ).

Дополнительные сведения о поддерживаемых единицах длины см. в Справочнике по значениям и единицам CSS.

процент
Целое число, за которым следует процент (%). Процентное значение относится к области позиционирования фона.

Примеры

Базовый список примеров синтаксиса для background-size.

 
размер фона: обложка
размер фона: содержит


размер фона: 50%
размер фона: 3em
размер фона: 12px
размер фона: авто


размер фона: 50% авто
размер фона: 3em 25%
размер фона: авто 6px
размер фона: авто авто


размер фона: авто, авто
размер фона: 50%, 25%, 25%
размер фона: 6px, авто, содержать

размер фона: наследовать
  

HTML-структура серии из

s, которые идентичны, за исключением того, что они имеют разные значения background-size , применяемые к фоновому изображению.

  

Исходное изображение имеет размер 273 x 286 пикселей и имеет прозрачную область снаружи размером примерно 45 пикселей.

размер фона: авто авто;
размер фона: содержит;
размер фона: обложка;
фоновый размер: 20% 25%;
размер фона: 100px 400px;
размер фона: 100% 250 пикселей;
фоновый размер: 100% 250 пикселей, 20% 25%;

CSS применен к приведенному выше примеру HTML.

  раздел {
   ширина: 17%;
   высота: 200 пикселей;
   отступ: 10 пикселей;
   радиус границы: 20px;
   box-shadow: 2px 2px 10px rgba (0,0,0,0,75);
   плыть налево;
   поля: 0 20px 20px 0;
   цвет фона: rgba (0,0,0,0,25);
   фоновое изображение: URL-адрес (/logo/wplogo_transparent_xlg.png);
 }

 код {
   цвет фона: rgba (255 255 255, 0,7);
   отступ: 2px;
   радиус границы: 5px
 }

.один {
  размер фона: авто авто;
}

.два {
  размер фона: содержит;
}

.три {
  размер фона: обложка;
}

.четыре {
  размер фона: 20% 25%;
}

.пять {
  размер фона: 100px 400px;
}

.шесть {
  размер фона: 100% 250 пикселей;
}

.Семь {
  фоновое изображение: URL(/logo/wplogo_transparent_xlg.png), URL(/logo/wplogo_transparent_xlg.png);
  размер фона: 100% 250 пикселей, 20% 25%;
}
  

Посмотреть живой пример

Примечания

Замечания

Значение auto для одного измерения разрешается с использованием внутреннего соотношения изображения и размера другого измерения. Если какое-либо из этих значений недоступно, используется внутренний размер изображения.Если собственный размер изображения недоступен, ему присваивается значение 100%. Если оба значения равны auto , используйте внутреннюю ширину, высоту или оба значения изображения. Если изображение не имеет ни собственной ширины, ни внутренней высоты, его размер определяется как , содержащий . Отрицательные значения не допускаются. В Windows Internet Explorer 9 фон блока может состоять из нескольких слоев. Количество слоев определяется количеством значений, разделенных запятыми, в свойстве background-image .Каждое из изображений имеет размер, положение и мозаику в соответствии с соответствующим значением в других свойствах фона ( background-attachment , background-clip , background-origin , background-position , background-repeat и размер фона ). Первое изображение в списке — ближайший к пользователю слой, следующее рисуется за первым и так далее.

Связанные спецификации

Модуль фонов и границ CSS, уровень 3
Рекомендация кандидата

См. также

Связанные статьи

Фон

Связанные страницы

Атрибуция

Как изменить размер фоновых изображений с помощью CSS3

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

Существует несколько способов определения размеров размеров — просмотреть демонстрационную страницу CSS3 background-size .

Абсолютное изменение размера

Измерения длины могут быть применены с использованием:

  background-size: ширина высота;  

По умолчанию для ширины и высоты установлены значения auto , что сохраняет исходные размеры изображения.

Мы можем изменить размер изображения до нового размера, используя абсолютные измерения, такие как px, em, cm и т. д. При необходимости соотношение сторон будет изменено, поэтому, если наше фоновое изображение имеет размер 200×200 пикселей, следующий код сохраняет эту высоту, но вдвое меньше ширины:

  размер фона: 100 пикселей 200 пикселей;  

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

.
  размер фона: 100 пикселей;

размер фона: 100 пикселей авто;  

Этот код масштабирует наше изображение 200×200 до 100×100 пикселей.

Относительное изменение размера с использованием процентов

Если используется процент, размер основан на содержащем элементе — НЕ размер изображения, например.

  background-size: 50% авто;  

Таким образом, ширина фонового изображения зависит от размера его контейнера. Если ширина нашего контейнера составляет 500 пикселей, размер нашего изображения изменяется до 250×250.

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

Масштабирование до максимального размера

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

  background-size: содержат;  

Заливка фона

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

  background-size: обложка;  

Размер нескольких фонов

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

  фон:
url("sheep.png") 60% 90% без повторов,
url("sheep.png") 40% 50% без повторов,
url("sheep.png") 10% 20% без повторов #393;
размер фона: 240px 210px, авто, 150px;  

Совместимость с браузером

Последние версии всех браузеров поддерживают background-size без префикса.

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

Стенографическая запись

В спецификации W3C CSS Backgrounds and Borders Module Level 3 указано, что background-size может быть определен после background-position в сокращенной нотации background .Ни один из браузеров не поддерживает эту опцию, поэтому на данный момент background-size должен быть определен как отдельное свойство.

Посмотреть демонстрационную страницу CSS3 в фоновом режиме…

Поднимите свои навыки работы с CSS на новый уровень с помощью нашей книги «Мастер CSS, 2-е издание» Тиффани Б. Браун, в которой рассказывается об анимациях CSS, переходах, преобразованиях и многом другом.

Как создать фоновое видео с помощью CSS

Если вы хотите привлечь новых посетителей на свой веб-сайт, у вас есть на это от 10 до 20 секунд.Жизнь коротка, и никто не хочет тратить свое время на заурядную веб-страницу. Итак, как мы можем вдохнуть жизнь в контент нашей страницы, чтобы привлечь внимание посетителей и заставить их прокручивать страницу?

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

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

Как создать полноэкранный фон видео с помощью CSS

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

  
<петля автоматического воспроизведения видео отключена poster="https://assets.codepen.io/6093409/river.jpg">
 

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

  • Атрибут id предназначен для стилизации нашего элемента видео с помощью CSS. Это необходимо для достижения эффекта полноэкранного фона.
  • Атрибут autoplay запускает видео автоматически после загрузки страницы.
  • Атрибут loop воспроизводит видео в бесконечном цикле.
  • Атрибут muted отключает звук для видео. Воздержитесь от воспроизведения звука видео на вашей странице, если это не было инициировано пользователем. Это создает проблему доступности и потенциально неприятный пользовательский опыт.
  • Наконец, изображение poster отображается на экране во время загрузки видео или вместо видео, если оно не загружается. Мы рекомендуем сделать изображение постера первым кадром вашего видео, чтобы оно выглядело максимально плавно.

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

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

  

ЭТО РЕКА.


Как величественно.


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

.
  
#background-video {
  width: 100vw;
 высота: 100vh;
  подходит для объекта: обложка;
  позиция: фиксированная;
  слева: 0;
  справа: 0;
  сверху: 0;
  снизу: 0;
  Z-индекс: -1;
}

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

  • height: 100vw (ширина области просмотра) и width: 100vh (высота области просмотра) расширяют видео на всю ширину и высоту области просмотра.
  • object-fit: обложка автоматически масштабирует фоновое видео, чтобы сохранить исходное соотношение сторон при заполнении экрана, обрезая края видео, когда это необходимо.
  • позиция: фиксированная и последующие левая , правая , верхняя и нижняя позиционируют видео относительно окна просмотра и отделяют его от остального содержимого страницы. Это удерживает видео на месте, когда пользователь прокручивает его, и позволяет другому контенту располагаться поверх него.
  • z-index помещает видеофон под сопровождающий контент.

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

.
  
h2, h3 {
  цвет: белый;
  семейство шрифтов: Trebuchet MS;
  вес шрифта: полужирный;
выравнивание текста: по центру;
}

h2 {
  размер шрифта: 6rem;
  margin-top: 30vh;
}

h3 { размер шрифта: 3rem; }

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

Вместо этого мы добавим медиа-запрос, который заменит видео изображением нашего постера на экранах шириной 750 пикселей или меньше.

  
@media (максимальная ширина: 750 пикселей) {
    #background-video { display: none; }
    body {
      background: url("https://assets.codepen.io/6093409/river.jpg") без повторов;
      background-size: обложка;
    }
}

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

См. Фоновое видео Pen 1 Кристины Перриконе (@hubspot) на CodePen.

 

Добавить дополнительный контент страницы

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

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

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

См. Фоновое видео Pen 2 от Кристины Перриконе (@hubspot) на CodePen.

Мы задали нашему элементу

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

Фон видео CSS для привлечения вашей аудитории

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

Как использовать фоновые изображения в React (с примером кода)

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

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

Чтобы использовать изображения в React, мы используем атрибут стиля backgroundImage . При добавлении к компоненту React backgroundImage отображает изображение для заполнения указанной части элемента (или всего элемента).

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

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

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

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

Начнем с простого примера фонового изображения внутри элемента React. Мы хотим отобразить следующее изображение логотипа Upmostly:

Внутри компонента React.Изображение расположено в каталоге следующим образом:

Попробуем отобразить изображение самым простым способом:

  

импортировать изображение из "./img/UpmostlyLogo.png"; Функция Компонент() { вернуть (

Привет мир
); } экспорт {Компонент};

Этот компонент отображает следующий вывод:

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

Чтобы добавить изображение к компоненту, мы используем backgroundImage . Мы устанавливаем backgroundImage на изображение, которое мы указали выше.

Обратите внимание, что мы конвертируем изображение в URL с помощью url() . url() используется для включения файла в стиль CSS (полная ссылка здесь). url() должен быть одной строкой, поэтому мы объединяем ее с переменной изображения.

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

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

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

Манипулирование backgroundImage

По сути, backgroundImage в React — это то же самое, что и «background-image» в CSS. Все манипуляции CSS с «фоновым изображением» будут работать с React (полную ссылку можно найти здесь).

Сначала удалим все лишние копии образа; мы хотим, чтобы на экране отображался только один логотип Upmostly. Для этого устанавливаем свойство backgroundRepeat :

  

импортировать изображение из "./img/UpmostlyLogo.png"; Функция Компонент() { вернуть (

Привет мир
); } экспорт {Компонент};

Единственное, что мы изменили, это то, что мы установили backgroundRepeat на «не повторять».Отрисовывается следующее:

Теперь у нас есть только одно фоновое изображение. Однако он все равно обрезан, так что видна только вершина.

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

Чтобы решить эту проблему, мы подгоним изображение к компоненту React:

  

импортируем изображение из "./img/UpmostlyLogo.png"; Функция Компонент() { вернуть (

Привет мир
); } экспорт {Компонент};

Все, что мы сделали, это добавили «backgroundSize: ‘contain’» к стилям div.Этот код отображает следующее:

Это очень мало, поэтому теперь мы увеличим размер компонента React. Это действительно легко и просто; все, что нам нужно сделать, это добавить еще несколько стилей:

  

импортировать изображение из "./img/UpmostlyLogo.png"; Функция Компонент() { вернуть (

Привет мир
); } экспорт {Компонент};

В стилях div мы устанавливаем для height и width значение «600px» для каждого.Код отображает следующее:

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

Получение фоновых изображений из других источников

Теперь мы знаем, как использовать React backgroundImage с изображениями в каталоге «src/», но что, если мы хотим использовать изображения вне каталога «src/» или из облака ?

‘Create-react-app’ создает еще одну папку рядом с ‘src/’, ‘public/’. Здесь мы можем хранить изображения и рендерить их через backgroundImage .

При использовании изображения из каталога «public/» нам не нужно выполнять шаг импорта, который мы сделали в первом примере. Вместо этого мы можем напрямую ссылаться на изображение.

Со следующей настройкой каталога:

Мы можем напрямую ссылаться на изображение:

  

function Component() { вернуть (

Привет мир
); } экспорт {Компонент};

Единственное, что мы изменили по сравнению с предыдущим примером, это ссылка на «UpmostlyLogo.png». На этот раз мы установили для backgroundImage значение «url(/UpmostlyLogo.png)», ссылаясь на изображение из каталога «public/», как если бы оно находилось в той же папке, что и наш компонент React.

Мы получаем тот же вывод:

Мы также можем получить изображения для backgroundImage из облака. Все, что нам нужно, это URL-адрес изображения, к которому мы можем получить доступ.

AWS S3 — это служба хранения файлов, которая может хранить изображения и генерировать для них полезные URL-адреса. Хотя использование S3 и необходимых обратных вызовов выходит за рамки этой статьи, мы будем использовать URL-адрес изображения для следующего примера.

Следующий пример взят из работающего веб-приложения. Мы извлекаем необходимые URL-адреса из S3 и используем их для установки фоновых изображений наших компонентов. Мы также будем регистрировать URL-адреса изображений, которые мы загружаем в консоль:

  

console.log("URL set:", pull_image_url)

Тот же URL-адрес передается в компонент ниже render() метод:

  

визуализация () { вернуть( <дел> <дел> {это.

Добавить комментарий

Ваш адрес email не будет опубликован.