Как изменить фон на сайте: Меняем фон страницы с помощью HTML и CSS

alexxlab

Цвет фона | htmlbook.ru

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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега <body>.

Пример 1. Изменение цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет фона</title>
 </head>
 <body bgcolor="#c0c0c0">
   <p>...</p>
 </body>
</html>

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

В качестве фона можно использовать любое подходящее для этого изображение.

Фон не должен отвлекать внимание от текста, при этом должен хорошо сочетаться с цветовой гаммой веб-страницы и быть маленьким по размеру, чтобы быстро загружаться. Если после перечисленного вы все еще хотите добавить фоновый рисунок на страницу, следует воспользоваться атрибутом background тега <body>.

Пример 2. Добавление фонового рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновый рисунок</title>
 </head>
 <body background="images/bg.jpg">
  <p>...</p>
 </body>
</html>

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

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

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

Пример 3. Использование фонового рисунка и цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет фона</title>
 </head>
 <body bgcolor="#c0c0c0" background="images/bg.jpg">
   <p>...</p>
 </body>
</html>

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties=»fixed» тега <body>.

Пример 4. Задание фиксированного фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фон</title>
 </head>
 <body bgcolor="#c0c0c0" background="images/bg.jpg" 
  bgproperties="fixed">
   <p>...</p>
 </body>
</html>

При указании атрибута bgproperties, как показано в примере 4, фоновый рисунок на веб-странице будет оставаться неподвижным, а текст, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.

цветфон

Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

Главная » Все про HTML » Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

О том, как менять цвет текста я писал тут. Хочу сказать, что это не всегда удобно. Вот, например, вы хотите поменять цвет текста всей HTML страницы. Например, черный цвет текста изменить на красный. Для этого существует атрибут text для тэга <body>. Хочу зацепить тег <body>, так как в этом теге есть атрибуты, которые помогут изменить не только цвет текста, но и фон всей HTML  страницы. А теперь подробней и с примером.
Вот атрибуты, которые мы сейчас рассмотрим:

TEXT – этот атрибут задает цвет текста всего документа.
BGCOLOR – этот атрибут указывает цвет фона HTML странице.
BACKGROUND – с этим атрибутом можно залить фон страницы изображением.

Изменяем цвет текста с помощью атрибута text.

Атрибут text прописывается в теге <body>. Цвет задается в виде цифрового кода:

<body text=»#cc0000″>

или обычным названием цвета:

<body text=»green»>

Код кодировки и название цвета для HTML вы посмотрите тут.

Вот пример:


<html>
<head>
<title>Изменяем цвет текста с помощью атрибута text</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body text="#cc0000">
Текст страницы, таблицы, картинки, музыка и видео. 
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Изменяем цвет текста с помощью атрибута text</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body text="green">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Изменяем цвет фона с помощью атрибута BGCOLOR.

При помощи атрибута BGCOLOR, который тоже размещается в теге <body>, можно задать цвет фона HTML страницы.

Цвет задается в виде цифрового кода:

<body bgcolor=»#000000″>

или обычным названием цвета:

<body bgcolor=»green»>

Вот пример:


<html>
<head>
<title>Изменяем цвет фона с помощью атрибута BGCOLOR</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body bgcolor="#000000" text="green">
Текст страницы, таблицы, картинки, музыка и видео. 
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body bgcolor="green" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Изменяем цвет фона с помощью атрибута BACKGROUND.

Атрибут  BACKGROUND тоже размещается в теге <body>. С помощью этого атрибута вы сможете сделать картиночный фон. Формат картинки берите jpg или gif. Разрешение картинки можно брать от 12х12 пикселей и больше.

Если фоновая картинка размещена вместе с HTML файлом, это будет выглядеть так:

<bоdy baсkground=»fon.gif»>

Если фоновая картинка размещена в папке images, это будет выглядеть так:

<bоdy baсkground=»images/fon.gif»>

Вот пример:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body background="fon.
 
 
 gif" text="black">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body background="images/fon.gif" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Вот и все.
Теперь вы знаете, как изменить или задать цвет фона. Пробуйте закрепить урок, поменять значение, поэкспериментируйте.
Спасибо, что посетили блог BlogGood.ru. Удачи!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Метки: html, основы

Как изменить цвет фона любой веб-страницы, чтобы уменьшить нагрузку на глаза

от Крис Томас 4 июня 2016 · 33875 просмотров

Любой, кто много читает в Интернете, знает, что напряжение глаз, связанное с компьютером, может сильно раздражать, особенно если у вас уже есть другие проблемы со зрением или проблемы со зрением в условиях низкой освещенности. Одна из основных причин, по которой ваши глаза устают от долгих часов чтения на электронном устройстве, даже больше, чем если бы вы читали тот же текст из книги, связана с контрастом текста, который вы читаете, по сравнению с невнятным текстом. , более темный фон стены или вашего стола. Фактически, исследования доказали, что чтение на ярком экране в темной комнате может вызвать трудности с засыпанием и получением качественного БДГ.

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

Возможность выбора в веб-браузере — хорошая функция.

Вот несколько способов изменить цвет фона любой веб-страницы в Chrome, Firefox, Opera и Internet Explorer с помощью нескольких полезных расширений, плагинов и настроек:

Для пользователей Chrome

Установите и используйте один или больше следующих расширений:

  • Уход за глазами

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

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

  • Turn off the Lights  – это расширение больше подходит для просмотра видео на таких сайтах, как YouTube, поскольку оно заменяет яркий фон эффектом приглушенного театрального освещения.

  • Hacker Vision  — довольно простой, но высоко оцененный: более 150 000 пользователей поставили ему 5 звезд. Он применяет темный фон и жирный цвет текста ко всем веб-страницам. Также есть возможность указать, какие страницы вы хотите отображать в режиме высокой контрастности.

Для пользователей Firefox

Установите и используйте одно или несколько из следующих дополнений:

  • Раскрась этот сайт! — это один из моих любимых, так как он позволяет вам использовать ползунки для настройки точных цветов фона и переднего плана любого сайта. Это действительно делает Интернет более визуально настраиваемым местом и является отличным инструментом для веб-дизайнеров, которые ищут простой способ протестировать цветовые концепции на своих сайтах.

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

  • Stylish  – Из всех перечисленных здесь расширений и надстроек это обеспечивает наиболее гибкие возможности настройки. По сути, это позволяет вам изменить дизайн ваших любимых веб-сайтов и сохранить эти настройки, чтобы каждый раз, когда вы посещаете YouTube или Facebook, например, вы видели цвета фона и стили макета, которые вы выбрали лично. Он даже позволяет настраивать интерфейс самого браузера Firefox.

  • Очистите монитор + Easy Reading  – BYM — отличное расширение, позволяющее быстро переключать цвет фона сайта с помощью кнопки в строке состояния, пункта контекстного меню, вызываемого правой кнопкой мыши, или комбинации горячих клавиш «Ctrl+Alt+». З.»

Для пользователей Opera

Вот несколько расширений Opera, которые также выполняют свою работу:

  • Ночной режим — Добавляет кнопку с лампочкой в ​​правом верхнем углу браузера. При нажатии на нее можно переключаться между режимами «День» и «Ночь», при этом в ночном режиме отображается черный фон, что облегчает чтение для некоторых людей.
  • Dark Skin for YouTube  — изменяет цвет фона YouTube на темно-серый для более кинематографического эффекта просмотра.

Стоит отметить, что Theme-up Webpage и Dressup Webpage — это два устаревших расширения Opera, созданные одним и тем же разработчиком. Хотя они по-прежнему доступны в магазине расширений Opera, они не работают с текущими версиями браузера. Просто подумал, что мы должны упомянуть об этом, прежде чем вы тратите свое время на их попытки.

Для пользователей Internet Explorer

В IE процесс немного проще, так как опция встроена прямо в настройки браузера. Выполните следующие действия, чтобы настроить цвет фона и шрифт любой веб-страницы в Internet Explorer:

1. Щелкните колесо настроек в правом верхнем углу и выберите «Свойства обозревателя»

2. В разделе «Общие» », нажмите кнопку «Специальные возможности» в правом нижнем углу, затем установите все флажки в разделе «Форматирование»:

3. Нажмите кнопку «Цвета», снимите флажок «Использовать цвета Windows», а затем выберите нужный цвет текста, фона и ссылок.

 

Обновите просматриваемую страницу, и должна быть применена новая цветовая схема.

Заключение. Для этого лучше всего подходят Chrome и Firefox

Независимо от того, какой браузер вы используете, мы почти гарантируем, что вы сможете изменить цвет фона любой страницы, чтобы снизить нагрузку на глаза. С учетом сказанного, моими личными фаворитами являются Mozilla Firefox и Google Chrome, поскольку они стабильно занимают самые высокие позиции в тестах производительности и имеют самые большие библиотеки расширений и надстроек, как вы можете видеть только на этом примере.

#windows #how tos #background #color #firefox #chrome #browser

Оставайтесь на связи

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

Есть технический вопрос или новостной совет?

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

Избранные статьи

Популярные на этой неделе

Учебник Dreamweaver 30. Как изменить цвет фона веб-сайта

Dreamweaver — HTML и CSS с использованием Dreamweaver

Дэниел Вальтер Скотт || ВИДЕО: 30 из 34

Скачать файлы упражнений

Введение

Я рекомендую разместить ваш новый веб-сайт на Bluehost, вы можете получить большую скидку, зарегистрировавшись по этой ссылке: https://www.bluehost.com/track/byol/byol_dwhacud_30

Добавление повторяющегося фонового изображения

  1. Найдите или создайте подходящее повторяющееся фоновое изображение, полезный сайт 
     http://www. allfreebackgrounds.com
  2. Откройте наш веб-сайт Bird Bath.
  3. Изменить > Свойства страницы.
     
  4. В разделе «Внешний вид CSS» выберите «Обзор» и найдите изображение, которое хотите использовать в качестве повторяющегося изображения. Например. Birdbath5-background-repeat.jpg
  5. Выберите «Повторить» в меню «Повторить».
     
     
  6. Выберите «ОК».

Неподвижное фоновое изображение.

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

Примечание. Высота вашего веб-сайта должна быть достаточной для прокрутки.

  1. Добавьте фоновое изображение, как показано в предыдущем упражнении.
  2. Выберите «body» на панели «Селекторы».
  3. Измените «background-attachment» на фиксированное.
  4. Изменить «фоновое положение» на 50%.
  5. Изменить «фоновый повтор» на «Нет».
     
  6. Предварительный просмотр документа
     Примечание. При прокрутке вверх и вниз фон не должен двигаться.

Фон на 100%

Этот метод позволит вам добавить к вашей работе фоновое изображение, растянутое на весь браузер. Поддерживается всеми новыми браузерами. Некоторым старым браузерам (например, IE 8) для работы требуется немного дополнительного кода.

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

Примечание. Вам понадобится большое изображение. Текущий стандарт размера полноэкранного изображения составляет 1600×1200. Вы можете использовать что-то вроде Photoshop, чтобы создать нужный размер.

  1. Откройте: Файлы упражнений Dreamweaver > Текст > Фон CSS Code.docx
  2. Выделите весь код и скопируйте его.
     
     
  3. В Dreamweaver выберите «Просмотр кода»
  4. Поместите пару возвратов прямо над тегом: 
     
  5. Вставьте код нашего фона.
     
     
  6. Измените имена файлов x3 на имя нашего фонового изображения.
     напр. background-full.jpg
     
     
    Примечание. В режиме конструктора фон не отображается. Вам нужно будет предварительно просмотреть документ, чтобы увидеть результаты.
  7. Файл > Предварительный просмотр в браузере > Chrome
  8. Готово.
          
     
    Фон внутри div

Тег div может иметь собственное фоновое изображение. Это позволит вам поместить изображение в поле и позволит вам поместить текст сверху.

  1. Выберите div на панели выбора.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *