Меню

Css как менять цвет фона



CSS: Фон

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

Список свойств для стилизации заднего фона, которые будут
рассмотрены ниже:

  • background-color
  • background-image
  • background-repeat
  • background-position

Добавление фонового изображения

Следующие правила добавляют цвет фона и фоновое изображение к элементу . Затем мы задаем для элемента

Свойство background-color просто добавляет цвет фона на страницу или к определенному элементу. Мы использовали в примере background-color, чтобы установить фоновый цвет для элемента и внутри элемента

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

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

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

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

  • no-repeat — фоновое изображение не повторяется
  • repeat-x — повторяет фоновое изображение только по горизонтали
  • repeat-y — повторяет фоновое изображение по вертикали
  • repeat — фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)

Попробовать »

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

По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (background-repeat: no-repeat;) или должно повторяться с определенного места, то можно использовать свойство background-position, чтобы указать в каком месте окна браузера или элемента оно должно быть размещено. Это свойство обычно принимает два значения, разделяемые пробелом. Первое значение — положение по горизонтали, второе — по вертикали.

Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

Попробовать »

Если будет указано только одно значение, то по умолчанию вторым значением будет center:

это то же самое что и:

Вы также можете использовать в качестве значений пиксели или проценты. Они определяют расстояние от верхнего левого угла окна браузера (или элемента-контейнера). Верхний левый угол соответствует значению 0% 0%.

Фиксация фонового изображения

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

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

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

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

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

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

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

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

Источник

CSS-club – настройка внешнего вида сайта

Как изменить цвет и прозрачность элемента?

Сделать это можно с помощью свойства background-color , значением которого выступает . Указав цвет с прозрачностью вы сделаете фон элемента прозрачным. Читайте вводную в CSS, чтобы найти ответ на вопрос «Как задавать в CSS?».

Читайте также:  Что такое легкий грунт для цветов

Свойство: background-color.
Значение: .

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

Фон устанавливается с помощью свойства background-image , значением которого выступает url(ссылка на изображение) . С помощью других свойств настраивается положение и закрепление изображения. Более того, допустимо указывать несколько фоновых изображений, перечисляя их через запятую.

Свойство: background-image.
Значение: url(ссылка на изображение).

background – универсальное свойство объединяющее в себе несколько свойств отвечающих за настройки фона элемента. Среди них: уже известное вам из первого вопроса свойство background-color (фоновый цвет), background-image (фоновое изображение), background-position (позиционирование фона), background-size (размер фона), background-repeat (повторение фона) и background-attachment (закрепление фона).

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

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

background-position совмещает в себе два свойства: background-position-x – позиционирование фона по горизонтали и background-position-y, задающее положение фона по вертикали.

Значение может указываться в виде как ключевых слов:
, так и процентов:
При этом 0% 0% – это левый верхний угол, а 100% 100% – правый нижний.

Кроме того, можно указать и значения в пикселях (px), чтобы настроить отступ от левого верхнего угла.

При указании значения «по центру» (как по горизонтали, так и по вертикали) можно не указывать повторяющиеся center center или 50% 50% , а указать значение только один раз.

Значением свойства background-size могут выступать ключевые слова:

  • auto – размер фонового изображения не изменяется.
  • cover – фоновое изображение заполняет собой элемент.
  • contain – фоновое изображение вписывается в рамки элемента, чтобы оно было видно полностью.

Кроме ключевых слов можно использовать значения в пикселях (px), чтобы задать точные размеры изображению, или проценты (%), чтобы задать размер фонового изображения относительно размеров элемента. В таком варианте нужно указывать два значения: ширина и высота. При этом, можно указать одно значение в пикселях или процентах, а другое указать как auto – таким образом у изображения сохранятся пропорции.

Значениями свойства background-repeat могут быть следующие ключевые слова:

  • no-repeat – изображение не повторяется.
  • repeat – изображение повторяется, полностью заполняя элемент.

Так же есть особые условия повторения: space и round . Откройте песочницу на сайте webref.ru и переключайте значения, чтобы увидеть их работу.

Значениями свойства background-attachment могут быть следующие ключевые слова:

  • scroll – изображение не закреплено, оно будет прокручиваться вместе с элементом.
  • fixed – изображение закреплено, оно будет неподвижно при прокрутке.

У всех описанных свойств, кроме background-color, в том числе и у универсального свойства background , значения могут быть написаны через запятую, чтобы указать свойства для нескольких фоновых изображений:
При этом чем раньше указан набор свойств для изображений, тем «выше» будет изображение: то есть персонажа мы крепим в начале, а уже затем подкладываем под него фон.

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

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

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

※ Как сделать прозрачными кнопки сабменю написано в вопросе «Как изменить цвет и прозрачность элемента?».

Самые распространённые виды градиентов, работающие в CSS это:

  • Линейный – за него отвечает функция linear-gradient() .
  • Круговой – за него отвечает функция radial-gradient() .

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

Самым простым и эффективным способом создания градиента является использование онлайн генераторов:

  • cssgradient.io
  • www.colorzilla.com

Или использовать многочисленные коллекции градиентов: webgradients.com, webkul.github.io, www.gradients.io и т.д.

Рекомендуется всегда указывать фоновый цвет, так как поддержка свойства даже у последних версий браузеров не полная: caniuse.com

, то градиент приобретёт ту самую форму эллипса ( ellipse ), а его ширина и высота будут равняться ширине и высоте элемента.

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

  • – список цветов перечисленных через запятую.
  • Итого, самый простой пример кругового градиента:
    Но красивее получиться, если указывать форму, размер и позицию градиента:

    Читайте также:  Сколько человек с карим цветом глаз

    Как изменить цвет текста?

    Цвет текста задаётся с помощью свойства color , значением которого выступает . Читайте вводную в CSS, чтобы найти ответ на вопрос «Как задавать в CSS?».

    Свойство: color.
    Значение: .

    Как скрыть элемент?

    Чтобы просто скрыть элемент можно использовать свойство display со значением none .

    Свойство: display
    Значение: none.

    Однако в некоторых ситуациях вам потребуется не просто скрыть элемент, но и оставить его место пустым, например, чтобы не сломать вёрстку сайта. В таком случае вам нужно использовать свойство visibility со значением hidden . Самое крутое в этом свойстве то, что потомков этого элемента можно снова сделать видимыми тем же свойством, но указав в значении visible .

    Свойство: visibility
    Значение: hidden

    Как изменить шрифт и иконки?

    Чтобы использовать стандартные (надёжные) шрифты можно использовать свойство font-family указав в значении свойства семейство шрифтов, либо один из девяти надёжных шрифтов.

    Для удобства, можно заменить шрифт, используемый на сайте, с помощью css-переменных —font-main , использующийся для основного текста, и —font-alt , использующийся для заголовков, тегов и некоторых других элементов. Эти переменные принимают точно такие же значения, как и свойство font-family . О использовании css-переменных можно прочитать тут.

    Свойство: font-family
    Значение:

    Обратите внимание, что —font-alt не обязательно должен повторять значение —font-main и может содержать другой шрифт. Если вы хотите оставить шрифт заголовков и тегов и некоторых других элементов без изменений, просто не копируйте это правило в свои настройки.

    Кроме названия самого шрифта, стоит также подумать о тех, у кого по какой-либо причине может не оказаться этого шрифта и указать либо другой более распространённый шрифт, либо семейство шрифтов – serif (с засечками), либо sans-serif (без засечек), соответствующее выбранному вами шрифту.

    Чтобы использовать нестандартные шрифты вы должны сперва подключить их с помощью правила @font-face, указав в этом правиле свойства шрифта, а также расположение файлов в интернете, чтобы посетители страницы также могли видеть ваш шрифт. Используйте fonts.google.com, чтобы найти нестандартные шрифты.

    Правило: @font-face

    • Для начала нужно указать в CSS откуда следует грузить шрифт.

    Замена иконок на примере Font Awesome
    Статья доступна тут: /comments/3340339
    Более новый метод подключения: /comments/3816739

    Как закруглить углы?

    Закруглить углы элемента можно с помощью свойства border-radius , значением которого выступают пиксели (px), либо проценты (%), обозначающие радиус скругления. Для квадратных элементов радиус в половину стороны (50%) превратит их в круг.

    Свойство: border-radius

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

    Для изменений свойств при наведении нужно добавить к селектору псевдокласс :hover , а для изменений при нажатии – псевдокласс :active .

    Кроме того, можно менять свойства потомков при наведении на родителя:

    Для плавного перехода между состояниями используйте свойство transition.

    Как сделать так, чтобы изменения отображались и на телефоне?

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

    Так будет до тех пор, пока в стиле не будет хотя бы одного медиа-запроса. Достаточно добавить пустой медиа-запрос в начало стиля:
    Это названо защитой от дурака не просто так: чтобы делать изменения в мобильной версии от вас потребуются хорошие базовые знания CSS и понимание основ адаптивной верстки.

    Улучшить свои навыки можно с помощью интерактивных курсов и справочников:

    • htmlacademy.ru/courses
    • codecademy.com/learn/learn-css

    Начинать рекомендуется с изучения HTML. На всё про всё у вас уйдет порядка 3-6 часов, но это будет отличной стартовой площадкой на будущее. Если уже всё знаете, то вперёд:

    Простой пример – разный цвет меню в мобильной и настольной версиях:
    Однако это не совсем точно – правила указанные без медиа-запроса будут работать как для мобильной, так и для настольной версии. То есть, свойства, указанные без медиа-запроса и не перезаписанные в дальнейшем из настроек настольной версии, будут продолжать работать. Это очень полезно, чтобы не писать одни и те же свойства для мобильной и настольной версий, но иногда требуется этого избежать. Чтобы указать правила исключительно для мобильной версии нужно использовать другие условия в медиа-запросе:
    Условия в медиа-запросах могут быть разные, но основные это (min-width: ) и (max-width: ) , означающие что правила внутри медиа-запроса с такими условиями будут работать после определённой минимальной ширины и до определённой максимальной ширины соответственно.

    Читайте также:  С каким цветом сочетается желтые перчатки

    Условия можно объединять:
    Этот пример не учитывает ориентацию устройства (для этого в медиа-запросах существует отдельное условие orientation ), но уже вполне рабочий вариант для настройки стиля под разные устройства.

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

    Подробнее о медиа-запросах можно прочитать на сайте webref.ru.

    Как найти элемент на экране и его «позывной» (селектор)? И как менять свойства элемента?
    Возможно необходимый селектор есть в Списке селекторов. Если нет, то следуйте инструкции:

    1) Наводим мышкой на элемент, который хотим изменить. Нажимаем правую кнопку мышки и выбираем «Просмотреть код».
    Другой вариант: Нажимаем Ctrl+Shift+C и щелкаем левой кнопкой мышки на нужном элементе.

    2) В открывшейся панели 2 области: левая — HTML, правая — CSS. В левой мы видим все элементы страницы, а в правой — свойства, которые отвечают за их внешний вид.

    3) Находим необходимое свойство в правой части панели и меняем его прямо там (так можно убедиться, что ваши изменения будут видны там где это нужно). Цвета можно изменить с помощью специального окошка, открывающегося по нажатию на цветной квадратик.

    ВАЖНО | На странице, есть такие заданные элементы (или их свойства ), которые не выйдет получить в инспекторе на динамической странице. Это могут быть: всплывающее окна (при наведении, нажатии, пр.), цвет текста при наведении (:hover), при нажатии (:focus) и другие.
    В браузерах, для таких случаев, предусмотрена функция «Pause script execution» или «Поставить на паузу сценарий». Вызывается это клавишей «F8» или комбинацией — «Cntrl+/». Как только данная функция активируется — тут же останавливает все что происходит на странице.
    Этого вполне достаточно чтобы «примерить» любые свойства на все выше перечисленные элементы.
    Например: наведите курсором на ссылку и она покраситься в другой цвет. В этот момент (наведения) на элемент накладывается псевдокласс «:hover». Ему заданы свойства. При обычных условиях, когда вы уберет курсор — элемент вернет свой изначальный цвет обратно.
    Для того чтобы настроить свойство для такого динамического элемента нам нужно остановить страницу в момент наведения. Как вариант — наводим курсором на элемент и нажимаем «F8» (страница остановилась и текст «в положении наведенного» также). Теперь ставим/редактируем нужные свойства.

    4) После изменения свойства, двигайтесь вверх по списку свойств, пока не наткнетесь на открывающуюся фигурную скобку < . Перед ней находится "селектор", та самая штука, которая определяет к какому именно элементу страницы будет применяться ваши правила.

    На примере Microsoft EDGE (в картинках)
    1920×964 1920×964 1920×964

    Что делать, если свойство не работает?

    Если не работает только отдельное свойство, а не всё правило целиком, то к значению свойства нужно добавить !important .

    Если у вас не работает правило целиком – проверяйте свой код на ошибки самостоятельно, либо с помощью онлайн валидаторов CSS:

    • css-validator.org (на русском)
    • csslint.net

    Если вы знаете простые и понятные валидаторы – пишите в комментариях.

    Проверка кода в CSSLint
    Чтобы быстро проверить свой код (проверять готовые стили не нужно!) в CSSLint, вставьте свой код на сайт, нажмите на стрелочку рядом с надписью «Lint» и в конце первой строчки нажмите на «(None)», чтобы отключить все лишние проверки. Затем нажмите на «Lint».

    Полученные результаты можно сортировать по важности (по умолчанию) или по line, чтобы исправлять ошибки по порядку.

    Самая распространённая ошибка: незакрытые/лишние фигурные скобки вызовут ошибку на следующей строке, поэтому если вы видите «красный» селектор, то обратите внимание на строку выше: скорее всего, ошибка кроется именно там.

    Как сделать картинку-ссылку или картинку-спойлер?

    Картинки-ссылки картинки-спойлеры не имеют никакого отношения к CSS! Это делается с помощью BB-кода!

    Такие вопросы, откровенно говоря, задолбали, поэтому краткий ликбез:

    • Описание почти всех BB-кодов можно найти по ссылке на справку под каждым(!) полем ввода. Более сложные вещи (да, сложнее картинок-спойлеров!) описаны на странице «Расширенный BBCode».
    • Чтобы сделать картинку-ссылку достаточно обернуть некликабельную картинку в тег [url] , а чтобы сделать картинку-спойлер — на место надписи спойлер в стандартном шаблоне [spoiler=спойлер][/spoiler] надо подставить код некликабельной картинки.
    • Некликабельная картинка — это либо [poster] , либо [img] с параметром no-zoom .

    Настраиваемое разрешение:
    Лучше всего указывать только один параметр размера, например только ширину ( w=225 ), так как система сама определит размер другой строны на основе соотношения сторон. Пример:

    Источник