Как поставить картинку на фон в css: background-image

Содержание

как поменять фон на серый или добавить картинку, где в css это прописать? — Вопрос от Армен Goro

Вопросы
Дизайн сайта
как поменять фон на серый…

как поменять фон на серый или добавить картинку? где в css это прописать?

Закрыто с пометкой: Ответ получен!

21.

02.2019 | Автор: Армен Goro | Категория: Дизайн сайта
Закрыт | 19.08.2019 | Автор: Yuri_Geruk

голоса: 0

Голоса: +1

1. Перейти в Панель управления — Главная — Дизайн — Управление дизайном(CSS), удалить все содержимое, после вместо удаленного содержимого установить содержимое с файла http://trotuar-plitka.do.am/.s/src/css/1726.css — Сохранить.

2. После найти строку номер 10:

.tmpl_body{background:#fff;padding:0!important;height:100%;min-height:100%;position:relative}

вместо выделенного красным пропишите нужный вам серый цвет, подобрать можете код цвета на сайте https://www. color-hex.com/

3. Если хотите прописать картинку, тогда код:

background:#fff;

замените на:

background: url(ссылка на фото фона сайта)no-repeat 0%0%/cover fixed;

вместо выделенного красным прописать ссылку на ваше фото для фона сайта. Не забудьте после всего этого очистить кеш браузера https://ukit.com/ru/help/kak-ochistit-cahe так как не увидите изменений, и подумаете, что ничего не помогло.

21.02.2019 | Автор: Yuri_Geruk

Блочные изображения и фоновые изображения стихов в HTML и CSS

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

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

Теперь у вас будет смесь того и другого. Итак, причина, по которой он у вас здесь, в HTML, заключается в том, что если он есть в HTML, он называется изображением блочного уровня. Это означает, что его видит браузер или, по крайней мере, поисковая система. Появляется поисковая система, такая как Google или Bing, приходит сюда и говорит: «Эй, смотрите, есть веб-сайт, посвященный ремонту велосипедов», потому что это есть в нашем заголовке. И все это, они говорят: «О, там много текста о ремонте велосипедов, есть даже изображение», «Там есть текст Alt, с парнем о том, что он делает с велосипедами», и все это как бы добавляет поисковику. способность понять вас и то, на что похож ваш веб-сайт и по чему вы должны ранжироваться, в то время как здесь, в CSS, он игнорирует это, он говорит: «Меня не волнует, что вы потратили целую вечность, играя с верхним отступом», потому что это не добавляет ценности поиску, верно?

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

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

Итак, для этого нам нужно скопировать графику. Итак, давайте найдем наши файлы упражнений, перейдем к Project2. Мне нужны эти три, фоновое изображение 1, 2 и 3. Давайте скопируем его, пойдем на мой рабочий стол, найдем Project2. Поместите его в папку с изображениями и посмотрите, они уже там. Твоего не будет, мои есть, так что вставь сюда свое. Мое уже здесь, потому что я уже несколько раз пробовал это видео, и оно пошло плохо, пытаясь объяснить уровень блока по сравнению с фоном CSS. Мне потребовалось пару попыток, но я чувствую, что на этот раз у меня все получилось. В любом случае, это последний раз, когда я собираюсь это сделать.

Итак, наши изображения есть, давайте добавим их, так что мы собираемся перейти к Card1, и мы могли бы избавиться от… давайте сделаем пару вещей, давайте избавимся от цвета фона всего этого. Значит, тебе, тебе, тебе они больше не нужны. Итак, Card1, давайте поместим наш фон, Помните, что это было? Фоновая картинка. Хороший легкий. Следующая часть этого довольно странная, это URL. URL, пара скобок, а внутри здесь нужно ввести путь к изображению. В нашем случае это изображения, а затем я могу щелкнуть фоновую карту изображения1. И в конце поставить точку с запятой. Сохрани это, поехали
и проверьте, все ли работает.

Вы можете видеть, как это повторяется здесь, изображение недостаточно высокое, чтобы поместиться. Таким образом, вы никогда не добьетесь идеального соответствия изображения. Вы можете, вы можете заставить это, но поскольку мы используем процент, 30, что мы? 30%, будет очень сложно добиться идеального результата, верно? Таким образом, способ добиться идеального соответствия фону, вы помните, что это было? Это называлось фоном, я помню? Размер фона. помнишь это, Кавер? Это очень удобное CSS-свойство, которое как бы вписывается в поле, в котором оно находится. Так что, если поле станет меньше, скажем, 250, и я должен сделать его… я сделаю его значительно меньше, чтобы вы могли видеть, а ширина… давайте остановимся на этом. Имеет минимальную высоту, почему она еще высокая? Ах, так карты здесь.

Итак, первоначально мы добавили высоту к картам, и это действительно как бы иллюстрирует, почему добавление высоты немного затруднительно. Мы делаем это в этом классе только потому, что мне легко показать вам, » Эй, мы сделали тег Div», и мы знаем, что он в нужном месте, потому что мы дали ему высоту и цвет, но всякий раз, когда я работаю, никогда не добавляю высоты. Высота зависит от содержания, поэтому я буду удалять карты, вы делаете то же самое. Надеюсь, теперь он все еще работает? Нет, все эти парни дерутся. Так что эти ребята держат эту коробку красивой и высокой. Это не то, что я хочу. Итак, что я собираюсь сделать, так это избавиться от минимального роста на тебе, ты, и давайте посмотрим. Ну вот.

Самое классное в этом то, что если я сделаю сейчас ширину 100 пикселей, а ширину 50, вы видите, изображение попытается растянуться, чтобы заполнить пробел. Если я сделаю это на 10% по ширине, обложка все еще будет пытаться поместиться там. Дэн, это было ужасное объяснение. Что я хочу, чтобы вы сделали, я бы хотел, чтобы у вас был минимальный рост, скажем, 250 на данный момент, для всех трех из них. Я думаю, что он был установлен на 300, давайте изменим его здесь, я хотел бы, чтобы у вас не было высоты на картах. Ни на одном из них нет цвета, давайте посмотрим. Мы должны сохранить его, давайте немного посмотрим.

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

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

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

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

Как обрезать изображение с помощью CSS

Обрезка изображения с помощью CSS — хорошо освещенная тема, и в Интернете есть множество статей на эту тему, так зачем еще одна? Это хороший вопрос, и у меня есть ответ. Многие сообщения охватывают 1000 и 1 хакерский способ обрезать изображение, что может ввести в заблуждение новичка. Мы отбросим методы обхода и сосредоточимся на тех, которые изначально предназначались для обрезки изображений. К счастью, теперь у нас есть хороший набор этих методов и даже больше.

«Зачем обрезать изображение в браузере?» Я бы спросил?

«Почему мы не можем перестать спрашивать почему и перейти к теме, Герман?» Вы можете резонно спросить меня в ответ.

Нам нужно продолжать спрашивать «почему», потому что мы хотим принять взвешенное решение. Мы хотим понять, где это применимо и чего нам это стоит. Иногда мы хотим обрезать изображение с помощью CSS просто потому, что мы фронтенд-разработчики и не можем сделать это на сервере. Это может быть либо из-за отсутствия знаний, либо из-за доступа к серверу. Хорошей новостью является то, что богатый CDN API здесь к вашим услугам.

Посмотрите на это красивое изображение горящих углей:

Изображение горящих углей

https://ucarecdn.com/5766e35a-14fd-4ede-ae35-1e7823bf7e64/-/preview/1600×900/

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

Обрезанное изображение горящих углей

https://ucarecdn.

com/5766e35a-14fd-4ede-ae35-1e7823bf7e64/-/preview/1600×900/-/crop/500×500/680,180/

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

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

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

Свойство background-image с background-size и background-position

Изображение или фоновое изображение с постоянным соотношением -path

Первый и основной подход. Используйте общий элемент

и два свойства: object-fit и object-position .

Давайте исследуем объект соответствует в первую очередь. Я не буду заниматься формулировкой и воспользуюсь определением из стандарта CSS.

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

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

Идея объект-фит заключается в том, что у нас есть , и он имеет указанный размер:

 .fitting-image {
  ширина: 150 пикселей;
  высота: 150 пикселей;
  объект-подгонка: <какое-то значение>;
}

В этом случае размер составляет 150 на 150 пикселей. Размер изображения, которое мы хотим продемонстрировать, составляет 201 на 300 пикселей. Нам нужно как-то примирить эту разницу. 9Свойство 0057 object-fit позволяет задать стратегию согласования. Должен признать, что это не всегда приводит к обрезке. Иногда вы растягиваетесь или уменьшаетсяе. Тем не менее, полезно представить полную картину объектно-подходящих , чтобы не вводить вас в заблуждение.

Значение в масштабе выглядит не столь очевидным. Давайте рассмотрим следующий пример, чтобы лучше понять, как это работает.

На данный момент мы, наконец, достигли позиции объекта Свойство CSS. Это свойство помогает нам перемещать отображаемый объект. Взгляните на следующие примеры. Прочтите заголовки ниже, чтобы понять варианты свойства object-position .

Теперь вы понимаете, как настроить положение обрезанного изображения.

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

Позвольте мне сначала указать на стандарты: background-image, background-size и background-position. Не тратьте на это слишком много времени, если вам нужны практические ответы. Лучше используйте приведенные ниже примеры и исследуйте их CSS. Воспользуйтесь этими ссылками, если вам нужно глубокое понимание или вдохновение для экспериментов.

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

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

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

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

 .strange-size-background-image {
  размер фона: 1234px 5678px;
}

Приведенный выше код абсолютно действителен.

Следующая часть дает вам дополнительную гибкость обрезки. Возможно, вы помните свойство box-sizing , сообщающее браузеру, что включать в ширину. Есть два свойства фона, использующие ту же идею: background-origin и background-clip .

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

Оба background-origin и background-clip имеют три возможных значения: border-box ,

padding-box и content-box .

В первом случае вы определяете место для размещения фонового изображения. Для border-box верхний левый угол фона будет в верхней левой точке границы. Логика одинакова для padding-box и content-box . Единственная разница заключается в том, где вы применяете фон.

Свойство background-clip сообщает, где происходит «обрезка». Взгляните на следующий CSS:

 .origin-border-clip-content {
  background-origin: рамка-бокс;
  фоновый клип: поле содержимого;
}

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

Описанные два свойства были первым ложным дном, о котором я упоминал. Почему я их так назвал? Потому что они редкие гости в других статьях по теме, а я их обнаружил только в спецификации. А что такое второе фальш-дно? Это обрезание текста. Самое интересное о text Значение свойства background-clip заключается в том, что оно исходит из так называемого уровня жизни HTML. За этим стоит конфликт старых времен, а префикс -webkit- — это старый подход к проверке новых функций в браузерах. Только эти два фактора могут привнести сюжет и поворот в эту статью, но не будем заходить так далеко. Взгляните на этот очаровательный класс CSS:

 .background-clipped-to-text {
  цвет: прозрачный;
  фоновый клип: текст;
  -webkit-background-clip: текст;
}

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

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

Больше всего хаков в прошлые времена использовалось для сохранения пропорций содержимого обрезанного изображения. Когда вы используете изображение, имеющее 100% ширину контейнера, вы не можете явно задать высоту, чтобы сохранить пропорции. В этом вам поможет CSS-свойство аспектного отношения. Он имеет достойную поддержку современных браузеров, но не настолько хорош, чтобы оставаться небрежным. Пожалуйста, проверьте caniuse.com для проверки.

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

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

Это свойство CSS является единственным дополнением, необходимым для применения правильной обрезки:

 .some-class {
  border-radius: <обязательное значение>;
}

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

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

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

Давайте сначала посмотрим на синтаксис свойства clip-path:

 .clipped-image {
  клип-путь: <клип-источник> | [ <базовая форма> || <поле геометрии> ] | никто
}

Мы исследуем каждую от самой примитивной до самой сложной.

нет

Путь отсечения не создается.

базовая форма и блок геометрии

Эта часть синтаксиса позволяет нам работать с предопределенным набором форм. Несмотря на свои ограничения, он довольно мощный. Для базовой формы вы можете использовать inset() , circle() , ellipse() , polygon() или path() . Последний предоставляет возможность использовать синтаксис SVG для обрезки.

Мы могли бы опустить значение блока геометрии. Что ж, мы можем использовать его и пропустить базовой формы . При использовании блока геометрии вы ограничиваете кадрирование определенной областью, например, padding-box или в стиле SVG stroke-box . Я не буду приводить примеры применения блока геометрии . Если бы я попытался показать каждый образец, мне бы потребовалось как минимум 42 из них.

Всё-таки можно понять, посмотрев на примеры background-clip свойство представлено выше.