Как отменить background color css

background-color

Краткая информация

Версии CSS

Описание

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

Синтаксис

background-color: | transparent | inherit

Значения

transparent Устанавливает прозрачный фон. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

В данном примере для элементов веб-страницы применяется три различных способа задания фонового цвета. Результат примера показан на рис. 1.

Рис. 1. Применение background-color

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundColor

Браузеры

Источник

Фон в CSS – памятка для начинающих

При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

Работа с фоном в CSS

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам

background-image

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

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

background-repeat

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

Оно может иметь несколько значений:

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

background-position

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

gradient

Плавный переход от одного цвета к другому, причем переходов допускается несколько.

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

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

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

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

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

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

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

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

Относительное изменение размера

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

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

Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

Масштабирование до максимального размера

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

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

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

Заполнение фоном

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

В том случае, если соотношения сторон различаются, картинка обрежется:

Масштабирование сразу нескольких фонов

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

Создание полупрозрачного фона в CSS

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

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

Пример создания полупрозрачного блока:

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

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

Источник

Осваиваем свойство background color CSS

Цвет текста

Указание названия цвета

Самый простой и удобный способ указать цвет — это ввести его название. Единственным недостатком этого метода является то, что существует только шестнадцать так называемых « стандартных » цветов.

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

Шестнадцать названий цветов, которые можно использовать в CSS

Чтобы изменить цвет всех заголовков на коричневый, нужно ввести:

Заголовок отображается коричневым цветом

Шестнадцатеричные обозначения

Шестнадцать цветов — это мало, если учесть, что большинство мониторов могут отображать шестнадцать миллионов цветов. Но представьте, если бы нужно было задать название каждому из шестнадцати миллионов оттенков …

Эти буквы или цифры работают парами. Первые две цифры указывают количество красного, две следующие — зеленого, а две последние — голубого. Смешивая эти значения ( которые являются компонентами Red-Green-Blue в цвете ), можно получить любой цвет.

Таким образом, #000000 соответствует черному цвету, а #FFFFFF — белому.

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

Метод RGB

Изменение цвета в Paint

Выбор цвета в Paint

Цвет фона CSS

Чтобы указать цвета для фона веб-страницы, необходимо работать с html-тегом

Рассмотрите приведенный ниже код CSS :

Результат работы этого кода простой html страницы с фоном:

Белый текст на черном фоне

CSS и наследование

Если я применил черный цвет-фон и белый цвет текста к тегу

, все заголовки и абзацы также будут иметь черный фон и белый текст… Это называется наследованием: теги, которые находятся внутри другого тега, « наследуют » его свойства.

Это также отображено в названии « CSS », что переводится как « Каскадные таблицы стилей ». Свойства CSS наследуются в каскаде: если вы задаете стиль элементу, все его дочерние элементы будут иметь тот же стиль.

Это означает, что весь текст моей веб-страницы обязательно будет белым?

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

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

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

Пример наследования с тегом

Многие уверены, что они могут изменять только html цвет фона страницы. Это не так: можно изменить фон любого элемента: заголовков, абзацев, определенных слов и т. д. В этом случае они будут выделены (как если бы они были отмечены маркером).

Например, существует тег

, который используется для выделения определенных слов. Давайте используем его здесь:

По умолчанию текст отображается на желтом фоне. Можно изменить это с помощью CSS :

Красный цвет — фон применяется к тексту тега

. Действительно, даже если фон html-страницы черный, это свойство CSS для наиболее специфичного элемента имеет приоритет ( смотрите рисунок, приведенный ниже ):

Красный выделенный текст на черном фоне

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

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

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

Как сделать изображение фоном страницы в HTML

В результате мы получим:

Фоновое изображение страницы

Адрес, указывающий местоположение фонового изображения, может быть записан как абсолютный адрес ( http: // … ) или как относительный ( fond.png ).

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

background-attachment: прикрепление фона

Свойство CSS background-attachment используется для « закрепления » фона. Полученный эффект позволяет сделать так, чтобы фон « прокручивался » вместе с текстом. Доступны два значения:

background-repeat: повторение фона

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

background-position: положение фона

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

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

Их можно комбинировать. Например, чтобы разместить фоновое изображение в правом верхнем углу, нужно ввести:

Если я хочу отображать солнце в качестве фонового изображения ( следующий рисунок ), только один раз ( no-repeat ), всегда видимым ( fixed ) и расположенным в правом верхнем углу ( top right ), то следует написать следующий код фона html-страницы :

Солнце в качестве фонового изображения в правом верхнем углу

Сочетание свойств

Таким образом, можно написать:

Это первое « супер-свойство », которое я вам показываю, но будут и другие. Вы должны знать следующее:

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

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

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

Прозрачность

Свойство opacity или как сделать фон страницы в html прозрачным

Свойство opacity используется для указания уровня непрозрачности ( который является обратным для прозрачности ).

Вот как это можно использовать:

Вот пример, который даст представление о прозрачности.

Прозрачный абзац

Модель RGBa

Заключение

Можно указать цвет, введя его имя ( например, black ), значение в шестнадцатеричном формате ( #FFC8D3 ) или указав код RGB ( rgb(250,25,118) ).

Пожалуйста, оставьте ваши мнения по текущей теме материала. За комментарии, лайки, подписки, отклики, дизлайки огромное вам спасибо!

Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, лайки, дизлайки, подписки, отклики огромное вам спасибо!

Источник

2.10. CSS-фон

Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.

Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.

Свойства фона html-элементов

1. Базовый цвет: свойство background-color

Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.

Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.

Свойство не наследуется.

Рис. 1. Свойство background-color для разных элементов

2. Источник изображения: свойство background-image

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

Свойство не наследуется.

3. Укладка изображений: свойство background-repeat

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

Свойство не наследуется.

Рис. 2. Свойство background-repeat

4. Фиксация изображения: свойство background-attachment

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

Свойство не наследуется.

5. Позиционирование изображений: свойство background-position

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

Свойство не наследуется.

Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.

Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.

Рис. 3. Свойство background-position

Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:

Рис. 4. Фоновое изображение по низу блока

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

Рис. 5. Задание для блока нескольких фоновых изображений

6. Область рисования: свойство background-clip

Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.

Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.

Свойство не наследуется.

Рис. 6. Свойство background-clip

7. Область расположения фона: свойство background-origin

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

Свойство не наследуется.

Рис. 7. Свойство background-origin

8. Размер изображений: свойство background-size

Свойство background-size устанавливает размер фоновых изображений.

Свойство не наследуется.

Рис. 8. Свойство background-size

9. Краткая запись свойств фона: свойство background

10. Множественные фоны

Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.

Рис. 9. Пример использования нескольких фоновых изображений

Источник

Управление фоном элемента. Свойства группы background

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

Свойство background-color

Для указания цвета может быть использовано 16-ричное значение в виде 3-х или 6 цифр, rgb(), rgba(), hsl(), hsla() или название цвета. В коде приведены разнообразные варианты записи красного цвета, в том числе и с полупрозрачностью:

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

Также используется значение transparent (для прозрачного фона). Кстати именно transparent является значением по умолчанию для всех элементов.

Также вы можете подобрать цвет фона в системе rgb с помощью примера от Dev Loop

Свойство background-image

Для вставки фонового изображения используйте правило background-image :

Для того чтобы убрать изображение необходимо использовать значение none:

Для фоновых изображений используют обычно файлы в формате JPG, PNG, SVG или GIF. Еще одним редко используемым форматом является APNG, т.е. Animated (анимированный) PNG, просто потому, что изображений в таком формате еще очень мало и они поддерживаются далеко не всеми браузерами (инфо на caniuse.com). Также в сети все больше появляется файлов в формате WEBP, предложенном Google в 2010 году и имеющем пока частичную поддержку браузерами (caniuse.com). Этот формат можно получить с помощью конвертера.

Посмотрите на примере на фоновые изображения в разных форматах:

Свойство background-repeat

Свойство background-position

Источник