Меню

Как поменять цвет фона div



Фон в HTML

Фон для сайта HTML можно изменить как с помощью атрибутов тега body, так и с помощью CSS-стилей, примененных также к тегу body. Рассмотрим оба варианта как сделать фон для сайта.

Меняем цвет фона с помощью HTML

Тег body, как и практически любой HTML-тег имеет свои атрибуты. К атрибутам тега body относятся:

  • bgcolor — определяет цвет фона для страницы;
  • background — позволяет задать картинку в качестве фона веб-страницы (подробно этот вопрос рассмотрен в статье: Как сделать фон сайта картинкой HTML);
  • scroll — управляет отображением полосы прокрутки на странице;
  • text — задает базовый цвет текста, который будет выводиться на веб-странице;
  • bgproperties — указывает, будет ли прокручиваться фон вместе со страницей;
  • link — управляет цветом ссылок по умолчанию на странице;
  • alink — устанавливает цвет для активной ссылки;
  • vlink — определяет цвет для посещенной ссылки на странице;
  • leftmargin/rightmargin — задает отступ контента от левого или правого края окна браузера;
  • topmargin/bottommargin — задает отступ контента от верхнего или нижнего края окна браузера;

Чтобы изменить цвет фона с помощью HTML, воспользуемся атрибутом bgcolor:

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

Меняем цвет фона страницы с помощью CSS

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

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

Источник

Изменение фона div в зависимости от содержимого

Добрый день всем! Не силен в javascript, прошу помощи)))кто чем может)))

Есть html код, в котором есть 3 div’a, в каждом диве есть свое содержимое. Необходимо написать такой скрипт, который будет проверять содержимое этих дивов и в зависимости от содержимого будет устанавливать разный цвет фона.

Изменение ширины

Изменение фона div
Здравствуйте! Подскажите, можно ли как то используя javascript изменять bground элемента div.

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

pay4ok32rus, а отдельные классы для этих вещей в css создать?
просто делать скрипт в данном случае — создание велосипеда на 5 колёсах

у меня чусвто что вы и в html/css не сильны

Опан, не думал, что вы велосипедист

но я тоже предложу свой вариант

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Изменение цвета фона текста в зависимости от значения
Здравствуйте уважаемые форумчане. Только начал изучать xml понадобилось сделать следующее: в.

Изменение содержимого в зависимости от выбора
Добрый день. Есть 2 формы Form1,Form3, на 1 форме 9 кнопок (bitbtn) требуется изменить gif.

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

Изменение содержимого TreeView в зависимости от нажатой кнопки
Не знаю как правильно назвать то действие которое хочу сделать, объясню своими словами. Есть вот.

Динамическое изменение высоты блока в зависимости от содержимого
Всем привет! Блоки 6 — должны быть выполнены таким образом, что при добавлении и/или удалении.

Изменение содержимого листов в зависимости от выбора в ComboBox
3 элемента управление комбобокс в таблице экзель, как делать так что когда выбираешь одну из этих.

Читайте также:  Какие семена цветов для клумбы

Источник

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, однако следует учитывать, что в старых версиях браузеров, которые не поддерживают несколько фонов, правило для фона будет проигнорировано целиком.

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

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

Источник

background-color

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

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

Значение по умолчанию transparent
Наследуется Нет
Применяется Ко всем элементам
Процентная запись Неприменима
Ссылка на спецификацию http://www.w3.org/TR/CSS21/colors.html#propdef-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

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник

Фон блока в CSS

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

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

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

background-color: transparent — прозрачный фон (по умолчанию)

background-color: inherit — значение принимается от родительского элемента

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

Создадим блок, зададим ему размеры и установим цвет фона.

Область заполнения фона

Фон может зополнять разные области блока. Область задаётся с помощью свойства background-clip . Оно принимает следующие значения:

background-clip: border-box — весь блок вместе с рамкой (по умолчанию)

background-clip: padding-box — весь блок без рамки

background-clip: content-box — фон заполняет только область содержимого

При значении border-box заполняются только прозрачные части рамки. Если рамка сплошная и непрозрачная, то за ней фон не отображается.

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

Фон в виде картинки

В CSS есть возможность использовать в качестве фона картинку. Для этого есть свойство background-image . Значением этого свойства является путь к файлу картинки. Он указывается так:

background-image: url(«путь к файлу»);

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

Добавим блок с размерами 400 на 250, чуть меньше, чем изображение. И установим фон в виде картинки:

Читайте также:  Обои настенные как выбрать цвет

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

Размер фоновой картинки

Свойство background-size устанавливает размеры фоновой картинки. Оно определяет не размер фона, а именно размер изображения. Размеры фона зависят от размеров блока. А свойство background-size влияет на картину, которая становится фоном. Значение свойства можно указать в единицах измерения CSS или процентах. Сначала пишется ширина и через пробел высота. Если не соблюсти пропорции ширины и высоты, то изображение искажается.

Также у свойства background-size есть такие значения:

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

background-size: cover — картинка заполняет весь фон, сохраняя пропорции.

background-size: contain — вся картинка отображается в фоне.

Значения cover и contain есть также у свойства object-fit . В теме про него эти значения рассмотрены более подробно.

Укажем размер фоновой картинке:

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

В прошлом примере виден левый верхний угол изображения. При этом картинка оказалась обрезанной справа и снизу из-за того, что блок меньше изображения. Существует возможность расположить изображение по-другому, чтобы были видны другие части. Для этого используется позиционирование. Его устанавливает свойство background-position . Значением свойства являются два слова, перечисленных через пробел.

Первое слово — это горизонтальное позиционирование. Значение может быть left , center или right .

Второе слово — это вертикальное позиционирование. Значение может быть top , center или bottom .

Расположим изображение в созданном блоке справа сверху.

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

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

Чтобы изменить повторение изображения, используется свойство background-repeat . Оно принимает такие значения:

background-repeat: repeat — повторяется по горизонтали и по вертикали (по умолчанию)

background-repeat: repeat-x — повторяется только по горизонтали

background-repeat: repeat-y — повторяется только по вертикали

background-repeat: no-repeat — не повторяется

background-repeat: inherit — значение принимается от родительского элемента

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

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

Попробуйте разные способы повторения изображения.

Прокрутка фона

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

background-attachment: scroll — фон не движется относительно блока и движется вместе с блоком при прокрутке страницы (по умолчанию)

background-attachment: fixed — фон зафиксирован относительно левого верхнего угла окна браузера

background-attachment: local — фон движется вместе с содержимым при прокрутке блока

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

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

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

Источник