Как сделать фон заголовка в html

Добавил пользователь Дмитрий К.
Обновлено: 10.09.2024

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

Цвет в CSS чаще всего задаётся в шестнадцатеричном формате с символом решётки в начале:

Фоновое изображение для блока задаётся свойством background-image , а фоновый цвет — свойством background-color :

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

index.html Сплит-режим
style.css Сплит-режим

Сегодня весь вечер просидел в интернете. Читал про преимущества работы верстальщиком. Часто отвлекался на видео с котиками, конечно, но кое-что я запомнил:

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

Необходимые умения:	Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML) и представление о том, как работает CSS (смотрите Введение в CSS).
Цель:	Научиться стилизации фона и границ объектов.

Стилизация фона в CSS

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

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

Фоновый цвет

Свойство background-color определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет . background-color распространяется на сам контент и отступы от него (padding) .

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

Поиграйте с ними, используя любое доступное значение .

Фоновое изображение

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

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

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

Свойство background-repeat

Свойство background-repeat используется для управления повторениями фонового изображения. Доступные значения:

no-repeat — останавливает повторение фонового изображения во всех направлениях.
repeat-x — повторение фонового изображения по горизонтали.
repeat-y — повторение фонового изображения по вертикали.
repeat — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.

Попробуйте эти значения в примере ниже. Мы установили значение no-repeat , поэтому вы видите только одну звезду. Попробуйте разные значения - repeat-x и repeat-y — чтобы увидеть, какие эффекты они оказывают.

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

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

Вы также можете использовать ключевые слова :

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

Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.

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

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

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

Свойство background-position позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой левый верхний угол блока равен (0,0) , а сам блок располагается вдоль горизонтальной ( x ) и вертикальной ( y ) осей.

Примечание: По умолчанию значение background-position равно (0,0) .

Обычно свойство background-position задают в виде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.

Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице background-position ):

Допустимы значения длины и процентные:

Вы также можете смешивать значения ключевых слов с длинами или процентами, например:

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

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

Примечание: background-position — это сокращение для background-position-x и background-position-y (en-US), которые позволяют вам устанавливать различные значения положения по оси индивидуально .

Градиент в качестве фона

Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством background-image .

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

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

Несколько фоновых изображений

Также возможно создавать несколько фоновых изображений — просто разделив значения свойства background-image запятыми.

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

Примечание: Градиенты можно легко смешивать с обычными фоновыми изображениями .

Другие свойства background- * также могут иметь значения, разделённые запятыми, как и background-image :

Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение background-repeat для image1 будет no-repeat . Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения background-position . Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.

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

Закрепление фона

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

scroll : Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
fixed : Фиксирует элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
local : Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение scroll довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение local фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.

Свойство background-attachment действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на background-attachment.html (также смотри исходный код здесь).

Использование сокращённого свойства background

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

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

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

background-color можно указывать только после последней запятой.
Значения background-size могут быть включены только сразу после background-position , разделённые символом '/', например: center/80% .

Посетите страницу MDN свойства

, чтобы увидеть полное описание.

Доступность просмотра

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

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

Границы

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

Мы можем установить границу для всех четырёх сторон блока с помощью border :

Или мы можем нацеливаться на один край блока, например:

Индивидуальные свойства этих сокращений будут следующими:

И более детально:

Примечание : Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.

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

Закруглённые углы

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

Например, чтобы сделать все четыре угла блока радиусом 10px:

Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:

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

Упражнение с границами и фоном

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

Задайте рамку равную 5px black solid, с закруглёнными углами 10px.
Добавить фоновое изображение (используйте URL balloons.jpg ) и установите размер таким образом, чтобы он покрыл весь блок.
Задайте для

Примечание : вы можете посмотреть решение здесь — но сначала попробуйте сделать это сами !

Итоги

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

В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?

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

Навигация по статье:

Как в html сделать фон в виде цвета или картинки?

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

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

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

Чтобы в html сделать фон нам понадобится атрибуты bgcolor и background.

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

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

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

Как сделать фон в CSS?

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

Как сделать фон в виде цвета в CSS?

Для задания цвета фона мы можем использовать несколько форматов:

Уровень прозрачности задаётся в виде десятичного значения от 0 до 1, где 0 – полностью прозрачный, а 1 – не прозрачный.

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

Как сделать фон в виде картинки в CSS?

Для этого нам нужно будет:

1. К себе на сайт в определённую папку с картинками загрузить изображение, которое мы хотим использовать в качестве фона.
2. Задать его в CSS

В скобочках указываем путь к картинке.

Так же если изображение у вас небольшое то будьте готовы увидеть такую картину:

Вы можете отключить повторение фона для маленьких изображений, дописав no-repeat:

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

Или только по вертикали:

Кроме того мы можем управлять расположением фонового изображения для элемента. Для этого нам нужно дописать следующе:

top – для выравнивание по верхнему краю
bottom — для выравнивания по нижнему краю
left – выравниваем по левому краю
right – по правому
center – выравниваем по центру (можно использовать как для выравнивания по горизонтали так по вертикали)

Так же можно сочетать эти выравнивания.

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

По умолчанию фоновое изображение не подстраивается под размер элемента. В эпоху адаптивных дизайнов это доставляет много неудобств. Для решения этой проблемы можно использовать свойство background-size.

background-size: 100% auto; — растянет изображение по горизонтали, а по вертикали размер будет увеличиваться пропорционально чтобы не искажалось изображение.
background-size: auto 100%; — растягивает по высоте, а по ширине размер пропорционально масштабируется.
background-size: 100% 100%; — растянет картинку по горизонтали и вертикали, при этом изображение может деформироваться.
background-size: contain; — изображение будет масштабироваться под размер блока насколько это возможно без искажения.
background-size: cover; — картинка масштабируется чтобы хотя бы одна из сторон была по размеру элемента и не искажалась.

Как изменить расположение фона внутри элемента?

Кроме описанных выше значений top, bottom, left, right и center мы так же можем использовать значения в пикселях, процентах и em чтобы выставить фоновую картинку так как нам нужно.

Вариант №1 – разметка тегами

Первый вариант так себе, но работает – обвернуть каждую строку в и добавить переносы строк
.

Вариант №2 – box-shadow

Пример с полупрозрачностью:

Вариант №3 – box-decoration-break: clone

CSS свойство box-decoration-break: clone; добавляет отступы у переносимых строк, но не все браузеры его поддерживают.

Проблема градиента

Есть один способ – mix-blend-mode: lighten; (режим смешивания фоновых слоёв). Минус его в том что фон страницы должен быть однотонным и белый цвет текста.

Читайте также: