Цвет фона в блоке css

Цвет фона в блоке css

В течение предыдущих уроков мы все время использовали свойство цвета — color. Это свойство задает цвет текста внутри элемента.

Свойство color является наследуемым. Рассмотрим на примере, что это значит. Пусть у нас имеется html-страница со следующим кодом:

background

Универсальное свойство позволяет установить одновременно до пяти характеристик фона.

background-attachment

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

background-clip

Определяет, как цвет фона или фоновая картинка должна выводиться под границами.

background-color

Определяет цвет фона элемента.

background-image

Устанавливает фоновое изображение для элемента.

background-origin

Определяет область позиционирования фонового рисунка.

background-position

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

background-position-x

Задает положение фонового изображения внутри элемента по горизонтали.

background-position-y

Задает положение фонового изображения внутри элемента по вертикали.

background-repeat

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

background-size

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

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

Фон можно задать как для всей страницы (body), так и для отдельного элемента страницы. Давайте создадим блок и будем задавать ему разные варианты внешнего вида фона, добавляя к селектору bg_example разные CSS свойства.

.bg_example <
width: 400px;
height: 300px;
>

Это важно! Я не буду перечислять все возможные варианты записи CSS правил, а используемые верстальщиками в рабочих проектах (сокращенная запись).

Цвет фона в СSS

Цвет фона задается в виде шестнадцатеричного кода.

Как сделать картинку фоном

В веб-дизайне существует три подхода с картинками:

размноженная маленькая текстурная картинка

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

Читайте также:  Принтер для печати грамот и дипломов

картинка фоном без повтора

background: url(icon.png) no-repeat;

no-repeat – без повтора

Классический пример – это иконка. Ничто не мешает вставить иконку на сайт тегом img, но по правилам SEO, так делать не нужно. Существует четкое разделение между контентом и дизайном. Так вот иконка – это украшательство и вставляется на сайт фоном. Изображения в галереях, каруселях, статьях, портфолио – это все контент.

растянутая картинка на всю секцию или экран

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

background: url(bg_full.jpg) no-repeat cover;

Полупрозрачный фон на CSS

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

background: rgba(0, 0, 0, 0.5);

Градиент фона в CSS

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

background: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);

Размытый фон

Эффект размытого фона хорошо виден на фотографии. Для наглядности размоем не весь фон, а какую-нибудь область на нем. Размывать будем CSS фильтром blur и SVG фильтром feGaussianBlur, для лучшей кроссбраузерности. Однако для IE эта комбинация все равно не работает.

bg-image <
background: url(‘kabachok.jpg’) no-repeat fixed center / cover;
position: relative;
>br
.block <
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: inherit;
filter: blur(10px);
filter: url(#blur);
>

Читайте также:  Оптимизировать работу windows 7 программы

Заключение

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Ссылка на основную публикацию
    Хороший принтер для школьника
    Для ученика возможность распечатывать доклады, рефераты и иллюстрации для занятий в школе - совсем не лишняя. Школьнику в XXI веке...
    Файл с расширением dav чем открыть
    Файл формата DAV открывается специальными программами. Чтобы открыть данный формат, скачайте одну из предложенных программ. Чем открыть файл в формате...
    Файл подкачки windows 7 на флешку
    В прошлой статье рассказано, как определиться с оптимальным размером файла подкачки, что делать с SSD-дисками и как установить размер файла...
    Хороший телефон с aliexpress
    Обновлено 22.10.2019 На Алиэкспресс есть много разных производителей смартфонов. Даже есть такие международные бренды, как Apple. В этой подборке мы...
    Adblock detector