Css фоновое изображение: background-image | htmlbook.ru

Затемнить фоновое изображение CSS

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

Свойства для затемнения фонового изображения в CSS:

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

• Использование свойства фильтра.
• Используйте свойство background-image и установите его значение в виде линейного градиента.
• Использование свойства background-blend-mode.

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

Пример №1:

Мы используем Visual Studio Code, чтобы показать предоставленные примеры. Итак, мы откроем новый файл и выберем язык «HTML», в результате чего будет создан HTML-файл. Затем во вновь сгенерированном файле начинаем писать код. Расширение файла «.html» автоматически добавляется к имени файла при сохранении готового кода. Теперь мы получаем основные теги, ставя «!» метки и нажмите «Enter». Когда в созданном файле появятся основные теги HTML, мы начнем с добавления заголовка.

Затем мы также помещаем абзац под этим заголовком и вставляем изображение после этого абзаца. Если изображение вставлено, у нас есть еще один абзац, а также класс div с именем «затемненное изображение». На этом HTML-код завершен. Теперь сохраните его и давайте перейдем к файлу CSS, где мы добавим свойство «фильтр» для затемнения фонового изображения.

Для «h2» мы устанавливаем значение «font-family» на «Algerian», а также применяем «цвет» к этому заголовку как «зеленый». «Размер шрифта» текста абзаца составляет «20 пикселей», а его «цвет» — «красный», «жирный» в его «жирности шрифта». Затем мы собираемся использовать свойство «фильтр» для класса div «затемненное изображение». Это свойство помогает сделать изображение темнее. Мы использовали это свойство здесь, чтобы изображение на выходе выглядело темнее. Мы устанавливаем его значение с помощью значения «яркости» и выбираем яркость «60%» для этого изображения.

В «фоновом изображении» мы помещаем тот же путь к изображению, который мы указали в файле HTML. Итак, мы применяем это затемненное свойство к изображению, которое мы вставили выше, и мы увидим это исходное изображение, а также затемненное изображение на выходном экране. Мы также устанавливаем «ширину» и «высоту» div как «200px» и «620px» соответственно. Это свойство «высота» задает высоту div, а свойство «width» задает ширину div.

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

Пример №2:

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

Мы применяем «цвет» к этому заголовку как «бордовый» и устанавливаем значение «семейство шрифтов» для «h2» на «алжирский». «Высота» изображения установлена ​​​​на «240 пикселей», а его «ширина» — «630 пикселей». Затем мы упоминаем контейнер div «darkened-image» и помещаем свойство «background-image», в котором мы используем «linear-gradient» и устанавливаем его значение в форме «rgba». Здесь мы используем два значения «rgba» и устанавливаем их на «rgba (0, 0, 0, 0,5)», где «0,5» — это альфа-значение. Также вставляем изображение в «url()». Вставляем путь изображения в этот «url()». «Высота» этого div составляет «240 пикселей», а также мы определяем его «ширину» как «630 пикселей».

На выходе можно увидеть как исходную, так и затемненную версии изображения. Исходное изображение и затемненное изображение можно четко отличить друг от друга на снимке экрана ниже. Затемненное изображение визуализируется, потому что мы использовали свойство background-image и установили его значение в типе linear-gradient.

Пример №3:

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

Мы устанавливаем значение «font-family» для «h2» на «Algerian» и применяем «color» к этому заголовку на «бордовый». «Ширина» изображения — «630 пикселей», а «высота» — «250 пикселей». Мы используем имя класса div как «затемненное изображение» и собираемся применить к нему некоторые свойства. Мы используем свойство background и помещаем сюда значение rgba. Используемое нами значение «rgba» равно «(0, 0, 0, 0,7)», а затем у нас есть свойство «url», которое мы используем для указания пути к изображению. Мы указываем путь к изображению как «myNewImage. ПНГ».

После этого у нас есть свойство «background-repeat» и используем ключевое слово «no-repeat» в качестве значения этого свойства. Теперь мы также устанавливаем «размер фона» и размещаем «обложку», чтобы изображение закрывало весь фон. Свойство background-blend-mode предназначено для применения эффекта затемнения к изображению. Мы устанавливаем его как ключевое слово «затемнить». Таким образом, когда это изображение отображается на экране вывода, оно будет выглядеть затемненным из-за этого свойства. «Высота» div с именем «darkened-image» настроена на «330 пикселей», и мы также устанавливаем его «ширину», которая составляет «650 пикселей». Теперь посмотрите на вывод того, как эти изображения будут выглядеть.

В результате видны как исходные, так и более темные формы изображения. Здесь, на снимке ниже, можно легко определить разницу между исходным изображением и затемненным изображением. Мы использовали атрибут «background-blend-mode» и поместили ключевое слово «darker» в качестве значения этого атрибута для рендеринга затемненного изображения.

Вывод

Мы подробно рассмотрели эту концепцию и рассмотрели множество примеров того, как затемнить фоновое изображение в CSS. Как упоминалось ранее, мы использовали три разных свойства для затемнения фонового изображения. Мы использовали все три свойства в наших кодах. Мы также рассмотрели, как использовать эти свойства и как установить их значение. Мы обсудили, что у нас есть свойство «filter», свойство «background-image», а также свойство «background-blend-mode» для затемнения фонового изображения. Мы также предоставили результаты всех этих кодов, в которых мы визуализировали как затемнение, так и исходное изображение на выходном экране. Для вашего удобства мы создали подробное руководство, в котором код предоставлен и подробно объяснен вместе с результатами.

Изображение или фоновое изображение?

Изображение или фоновое изображение?

Когда следует использовать…

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

Краткий ответ: относится к содержанию, background-image относится к дизайну.

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

Изображение заголовка здесь является украшением. Это не часть сообщения документа, это необязательно. Он должен использовать свойство CSS background-image.

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

Многоликое возвращение

ЭКТАР 120 Фильм

Вы забыли об этом, но оно никогда не забыло о вас. Запомнить? Он размером с ладонь.

Стреляй от бедра

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

Дальномер!

Без заднего экрана. Приклейте взгляд к телу. И это не засчитывается в ваше экранное время

Многоликое возвращение

ЭКТАР 120 Фильм

Вы забыли об этом, но оно никогда не забыло о вас. Запомнить? Он размером с ладонь.

Стреляй от бедра

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

Дальномер!

Живите своими фотографиями. И это не засчитывается в ваше экранное время

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

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

Основные различия между HTML-тегом

и свойством background-image CSS

• Изображение, использующее HTML-тег , является частью HTML-документа. Он по-прежнему является частью документа, когда страница распечатывается или читается с помощью программы чтения с экрана — программы, используемой людьми с ограниченными возможностями, или программы чтения RSS-каналов, или когда документ отображается без поддержки CSS. HTML-элемент может иметь атрибут Alt.

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

Пример использования HTML-тега

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

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

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

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

• Использование тега вместо фонового изображения CSS может значительно повысить производительность анимации поверх фона.

Пример использования свойства CSS background-image

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

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

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

Вариантов использования фоновых изображений немного. Раньше их было больше из-за параметров, предоставляемых CSS-свойством background-size, но теперь такое же управление возможно для изображений с использованием HTML-тега со свойством object-fit CS.

Как управлять расположение изображений?

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

Все эти свойства поддерживаются пользовательским интерфейсом дизайнера Webflow на панели «Стиль».

• Свойство CSS background-image используется для вызова файла с использованием URL-адреса

• CSS background-position используется для установки исходной точки, например. по центру и точное положение от начала координат.

• Свойство CSS background-repeat определяет, повторяется ли изображение, и хо, например. без повторов или повтор-х .

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

• Свойство CSS background-attachment определяет, является ли положение изображения фиксированным или нет.

Управление положением изображения с помощью HTML-тега

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

• CSS-свойство background-position используется для установки исходной точки, например. по центру и точное положение от начала координат.

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

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

Как добавить фоновое изображение в WPForms

Хотите знать, как добавить фоновое изображение в свои формы? С помощью CSS можно легко оформить форму с помощью изображения или цветового градиента в качестве фона!

В этом уроке мы покажем вам, как добавить фоновое изображение в вашу форму.

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

---

1. Выбор фонового изображения

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

Что следует учесть

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

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

2. Выбор формы

Затем выберите форму, которую хотите настроить. Если вы еще не создали свою форму, добавьте новую форму, нажав WPForms »Добавить новую .

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

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

3. Добавление фонового изображения в форму

В конструкторе форм перейдите к Настройки » Общие » Дополнительные .

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

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

Использование существующего изображения

Если вы хотите использовать изображение из своей медиатеки, вам потребуется полный URL-адрес изображения. Чтобы получить это, сначала перейдите в Media » Library.

Здесь щелкните изображение, которое хотите использовать.

В открывшемся диалоговом окне нажмите Копировать URL в буфер обмена .

URL-адрес изображения будет скопирован в буфер обмена.

Сделав это, перейдите к Внешний вид » Настройте и выберите Дополнительный CSS.

Затем создайте пользовательский класс со свойством background-image и вставьте URL-адрес, который вы скопировали ранее.

Ниже мы написали пример такого класса. Не забудьте заменить /path/wpforms-backdrop.png фактическим URL-адресом вашего изображения.

 .wpf-пользовательский-фон {
     фоновое изображение: url(/path/wpforms-backdrop.png) !важно;
     отступ: 15px 35px !важно;
     /*Заполнение не является обязательным, но улучшает внешний вид при использовании фонового изображения в вашей форме.*/
}
 

Ваши настройки должны выглядеть примерно так.

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

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

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

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

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

В CSS доступно три типа градиентов:

• conic-gradient() , который создает конические градиенты.
• linear-gradient() , который создает линейные градиенты.
• radial-gradient() , который создает радиальные градиенты.

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

linear-gradient() .

Чтобы увидеть, как это работает, посмотрите пример кода ниже:

 .
No related posts.