Как сделать фиксированный фон сайта


фиксация фона — учебник CSS

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

Значения background-attachment

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

  • scroll (значение по умолчанию) — фоновое изображение перемещается вместе с другими элементами при скролле веб-страницы.
  • fixed — значение фиксирует фоновое изображение, делая его нечувствительным к скроллу. При прокручивании страницы фон на заднем плане останется неподвижным.
  • local — данное значение было добавлено из-за того, что в случае с локальным скроллом фон со значением scroll ведет себя как fixed. При значении local фон прокручивается вместе с содержимым элемента, и не прокручивается, если содержимое не скроллится (но прокручивается вместе с самим элементом).

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

background-attachment: scroll

background-attachment: fixed

background-attachment: local

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

Полная поддержка всех значений свойства background-attachment есть у десктопных браузеров IE9+, Edge 12+, Firefox 25+, Chrome (все версии), Safari 5+, Opera 11.5+. Из мобильных браузеров все значения понимают Opera Mobile, Firefox для Android, IE Mobile и QQ Browser. В других браузерах поддержка либо частичная, либо отсутствует.


Далее в учебнике: свойства background-origin и background-clip для позиционирования фоновых изображений и управления обрезкой.

html - css фиксирует положение фонового изображения и прокручивает содержимое вверх

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант
.

html - Сделать фон фиксированным (стационарным)

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

javascript - Как сделать фиксированный заголовок с таким же фоном, что и баннер?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант
.

CSS-фонов


Свойства фона CSS используются для определения фоновых эффектов. для элементов.

В этих главах вы узнаете о следующих свойствах фона CSS:

  • цвет фона
  • фоновое изображение
  • фон-повтор
  • фон-приставка
  • фон-позиция

Цвет фона CSS

Свойство background-color определяет цвет фона элемента.

Пример

Цвет фона страницы устанавливается следующим образом:

тело {
background-color: светло-голубой;
}

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

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

  • допустимое название цвета - например, «красный»
  • шестнадцатеричное значение - например, "# ff0000"
  • значение RGB - например, «rgb (255,0,0)»

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


Прочие элементы

Вы можете установить цвет фона для любых HTML-элементов:

Пример

Здесь элементы

,

и

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

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

div {
background-color: светло-голубой;
}

p {
background-color: желтый;
}

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

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

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

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


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

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

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

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

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

Пример

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

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


.

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

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий