Задний фон в html: Как добавить фоновый рисунок на веб-страницу?

08.10.1977 Разное

Содержание

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

Атрибут background | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
2.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

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

Синтаксис

<table background="URL">...</table>

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

background-image

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут background</title>
 </head>
 <body>

   <table background="images/snow.gif">
    <tr>
     <td> ... </td>
    </tr> 
   </table> 

 </body>
</html>

Россия напала на Украину!

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

Всем нам, украинцам, россиянам и всему миру правительство России врало последние два месяца. Нам говорили, что войска на границе “проходят учения”, что “Россия никого не собирается захватывать”, “их уже отводят”, а мирное население Украины “просто смотрит пропаганду”. Мы очень хотели верить вам.

Но в ночь на 24-ое февраля Россия напала на Украину, и все самые худшие предсказания стали нашей реальностью .

Киев, ул. Кошица 7а. 25.02.2022

Это не 1941, это сегодня. Это сейчас.

Больше 5 000	русских солдат убито в не своей и никому не нужной войне
Более 300	мирных украинских жителей погибли
Более 2 000	мирных людей ранено

Под Киевом горит нефтебаза – утро 27 февраля, 2022.

Нам искренне больно от ваших постов в соцсетях о том, что это “все сняли заранее” и “нарисовали”, но мы, к сожалению, вас понимаем.

Неделю назад никто из нас не поверил бы, что такое может произойти в 2022.

Метро Киева, Украина — с 25 февраля по сей день

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

И мы все еще хотим верить, что вам так же жутко от этого безумия, которое остановило всю нашу жизнь.

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

ул. Лобановского 6а, Киев, Украина. 26.02.2022

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

P.S. К сожалению, это не “фотошоп от Пентагона”, как вам говорят. И да, в этих квартирах находились люди.

«Это не война, а только спец. операция.»

Это война.

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

«Россия хочет только защитить ЛНР и ДНР.»

Это не так.

Все это время идет обстрел городов во всех областях Украины, вторые сутки украинские военные борются за Киев.

На карте Украины вы легко увидите, что Львов, Ивано-Франковск или Луцк – это больше 1,000 км от ЛНР и ДНР. Это другой конец страны. 25 февраля, 2022 – места попадания ракет

25 февраля, 2022 – места попадания ракет «Мирных жителей это не коснется.»

Уже коснулось.

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

Больше 1,200 мирных людей ранены или погибли. Среди них много детей.
Под обстрелы уже попадали в детские садики и больницы.
Мы вынуждены ночевать на станциях метро, боясь обвалов наших домов.
Наши жены рожают здесь детей. Наши питомцы пугаются взрывов.

«У российских войск нет потерь.»

Ваши соотечественники гибнут тысячами.

Нет более мотивированной армии чем та, что сражается за свою землю.
Мы на своей земле, и мы даем жесткий отпор каждому, кто приходит к нам с оружием.

«В Украине – геноцид русскоязычного народа, а Россия его спасает.»

Большинство из тех, кто сейчас пишет вам это письмо, всю жизнь говорят на русском, живя в Украине.

Говорят в семье, с друзьями и на работе. Нас никогда и никак не притесняли.

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

«Украина во власти нацистов и их нужно уничтожить.»

Сейчас у власти президент, за которого проголосовало три четверти населения Украины на свободных выборах в 2019 году.

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

У нас нет места диктатуре, и мы показали это всему миру в 2013 году. Мы не боимся говорить вслух, и нам точно не нужна ваша помощь в этом вопросе.

Украинские семьи потеряли больше 1,377,000 родных, борясь с нацизмом во время Второй мировой. Мы никогда не выберем нацизм, фашизм или национализм, как наш путь. И нам не верится, что вы сами можете всерьез так думать.

«Украинцы это заслужили.»

Мы у себя дома, на своей земле.

Украина никогда за всю историю не нападала на Россию и не хотела вам зла. Ваши войска напали на наши мирные города. Если вы действительно считаете, что для этого есть оправдание – нам жаль.

Мы не хотим ни минуты этой войны и ни одной бессмысленной смерти. Но мы не отдадим вам наш дом и не простим молчания, с которым вы смотрите на этот ночной кошмар.

Искренне ваш, Народ Украины

seodon.ru | Учебник HTML — Меняем цвет текста и фона

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега <P> нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

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

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег>…</тег> — указание цвета текста по имени.

<тег>…</тег> — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета текста</title>
</head>
<body>
<h5>Красный текст заголовка</h5>

<p>Синий текст параграфа. </p>

<p>
 <em>Зеленый курсив.</em>
 <span>Красный текст.</span> 
</p>
</body>
</html>

Результат в браузере

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

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

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег>…</тег> — указание цвета фона по имени.

<тег>…</тег> — указание цвета фона по коду.

Пример изменения цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета фона</title>
</head>
<body>
<h5>Заголовок.</h5>

<p>Параграф.</p>

<p>
 <b>Жирный текст.</b>
 <span>Обычный текст. </span> 
</p>
</body>
</html>

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

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

Домашнее задание.

Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Посмотреть результат → Посмотреть ответ

Как задавать цвет фона HTML документа

В уроке Основы HTML мы рассмотрели самые главные html теги, которые являются обязательными и присутствуют в любом html документе.

В данном уроке мы рассмотрим, как с помощью одного из этих тегов задать цвет фона html документа.

Материалы по теме:

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

Цвет фона всего html документа, задается в теге <body>. Теперь сделаем фон нашего документа, например желтым. Для этого в теге <body> необходимо прописать атрибут bgcolor=»#FFFF99″. Прописывается данный атрибут следующим образом: <body bgcolor=»#FFFF99″> </body>. Таким образом, код нашей html странички с желтым фоном будет выглядеть так:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="#FFFF99">Вот вы и создали свою первую web страницу!!!</body>
</html>

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

После этого запустите созданный html документ при помощи браузера, и вы увидите, что фон страницы стал бледно желтым. Атрибут bgcolor=»», который задает цвет фона, содержит в кавычках значение «#FFFF99» — это код цвета, который мы хотим задать в качестве фона, полный список таких кодов вы можете посмотреть в таблице html цветов.

Впереди этого кода всегда идет знак решетка “#”, а затем сочетание букв и цифр соответствующее определенному цвету или оттенку. Если вам понадобится узнать значение какого либо цвета или оттенка которого нет в таблице html цветов то это вы можете например сделать с помощью того же графического редактора Photoshop.

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

Скопировав это значение и вставив его в кавычки, вы измените цвет фона вашей странички. Только помните, что впереди значений должен находиться знак решетка #, например #dce8ff. Кроме этого цвет фона html документа можно устанавливать просто словами, например если в нашем атрибуте bgcolor вместо «#FFFF99» прописать «red» т. е. <body bgcolor=»red»> то цвет фона будет красным. Буквенное написание цветов вы также сможете найти в таблице htm кодов цветов.

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться:

Подробности: Обновлено: 04 Сентябрь 2013; Создано: 12 Январь 2010; Просмотров: 105129

Слайдер фонового изображения или меняющийся фон сайта с помощью CSS

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

HTML разметка

Тут все очень просто, нужно просто добавить UL-список в самое начало сразу после тега body.


<ul>
<li></li>
<li></li>
<li></li>
</ul>

В списке всего три строки li, то есть слайдер рассчитан на 3 изображения, если нужно больше, то первым шагом будет добавление еще нужного количества строк. Двигаемся дальше.

CSS стили

Тут наверное самая основная часть работы, так как от CSS, зависит то как будет работать наш слайдер. Открываем файл стиле вашего сайта и добавляем в него следующий код.


.body_slides{
	list-style:none;
	margin:0;
	padding:0;
	z-index:-2; 
	background:#000;}
.body_slides,
.body_slides:after{
    position: fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;}
. body_slides:after { 
    content: '';
	background: transparent url(images/pattern.png) repeat top left;}


.body_slides li{
    width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
    background-size:cover;
    background-repeat:no-repeat;
	opacity:0;
    -webkit-animation: anim_slides 18s linear infinite 0s;
    -moz-animation: anim_slides 18s linear infinite 0s;
    -o-animation: anim_slides 18s linear infinite 0s;
    -ms-animation: anim_slides 18s linear infinite 0s;
    animation: anim_slides 18s linear infinite 0s;
}
.body_slides li:nth-child(1){
background-image: url(images/1.jpg) 
}
.body_slides li:nth-child(2){
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(images/2.jpg) 
}
.body_slides li:nth-child(3){
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(images/3. jpg) 
}
@-webkit-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}

Если Вы разбираетесь в CSS, то для Вас не составит труда понять, что за что отвечает. Расскажу по минимуму, потому как обучать CSS, нет смысла.

Наш список со слайдами имеет класс body_slides. Ему заданы стили, для внешнего вида и общих настроек.

Далее у нас идет псевдоэлемент — :after, который задает дополнительный слой и поверх фона наложен узор в виде точек. Делается это с помощью изображение, к которому указан путь images/pattern.png. Если у Вас другой путь, то укажите его правильно.

.body_slides li:nth-child(1) — это первый по порядку слайд и ему задан фоновый рисунок. Далее идет nth-child(2), ему кроме рисунка задано еще время и равно 6 сек. То есть, он появится через 6 секунд после первого слайда. Далее nth-child(3), он появится еще через шесть секунд, поэтому у него время 12 сек. Если нужно добавить 4 слайд, то добавляем nth-child(4) и у него должно быть время уже 18 секунд. Думаю тут понятно.

Далее нужно указать полное время анимации, оно сейчас задано в body_slides li и равно 18 сек. Если добавите 4 слайд то будет равно 24 и так далее. Если с математикой дружите, должны справится, главное не ошибиться ибо слайдер ровно не заработает. По желанию можно ускорить или замедлить, прописав нужное время.

keyframes anim_slides — это появление и исчезновении слайда. Изначально слайд прозрачный и ему задано условие — opacity:0;. Когда приходит очередь любого из слайдов, он сначала появляется, а потом начинает вновь становится прозрачным и полностью исчезает, а на его месте появляется новый. В данном примере — 3 слайда и 100% анимации это время перелистывания всех слайдов, а не одного. Поэтому слайд первый появляется виден и исчезает на 30%(максимально можно 33.3%) потому как, если 100% разделить на 3 слайда — получится 33,3%. Если бы у вас было 4 слайда — то 25%. То бишь, нужно показать появление, показ и исчезновение слайда за 25% от общих 100%. В нашем примере с 3 слайдами. Слайд появляется от 0 до 6%, виден от 6 до 24% и исчезает от 24 до 30%. Если хотите изменить скорость появления или исчезновения, меняйте проценты — это процент от общего времени. От правильности указания процентов — зависит и правильность работы слайдера.

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

На этом все, спасибо за внимание. 🙂

фонов CSS

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

В этих главах вы узнаете о следующих свойствах фона CSS:

цвет фона
фоновое изображение
повтор фона
Фоновое приложение
фоновая позиция
фон (сокращенно свойство)

Цвет фона CSS

Свойство background-color указывает цвет фона элемента.

Пример

Цвет фона страницы устанавливается следующим образом:

body {
цвет фона: голубой;
}

Попробуй сам »

В CSS цвет чаще всего определяется следующим образом:

допустимое название цвета, например «красный»
шестнадцатеричное значение, например «#ff0000»
значение RGB — например, «rgb(255,0,0)»

Полное описание см. в разделе Цветовые значения CSS. список возможных значений цвета.

Прочие элементы

Вы можете установить цвет фона для любых элементов HTML:

Пример

Здесь элементы

,

будут иметь разные цвета фона:

h2 {
цвет фона: зеленый;
}

div {
цвет фона: голубой;
}

p {
фоновый цвет: желтый;
}

Попробуй сам »

Непрозрачность/Прозрачность

Свойство opacity определяет непрозрачность/прозрачность элемента. Может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:

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

Прозрачность с использованием RGBA

Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA .В следующем примере задается непрозрачность цвета фона, а не текста:

Из нашей главы «Цвета CSS» вы узнали, что в качестве значения цвета можно использовать RGB. Помимо RGB, вы можете использовать значение цвета RGB с альфа-каналом (RGB A ), который определяет непрозрачность цвета.

Значение цвета RGBA указывается с помощью: rgba(красный, зеленый, синий, альфа ). То Параметр alpha представляет собой число от 0,0 (полностью прозрачный) до 1. 0 (полностью непрозрачный).

Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.

Пример

div {
background: rgba(0, 128, 0, 0.3) /* Зеленый фон с непрозрачностью 30% */
}

Попробуй сам »

Свойство цвета фона CSS

Фоны HTML

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

Этот учебник посвящен:

Добавление цвета фона к элементам
Добавление фонового изображения к элементам
Выбор хорошего фона
Переход на CSS

Добавление цвета фона к элементам

Вы можете установить цвет фона элементов, используя атрибут bgcolor . Этот атрибут может принимать имя цвета, шестнадцатеричное значение или значение RGB.

Установка цвета фона веб-страницы

<тело bgcolor="#FFFFFF"> <тело bgcolor="rgb(255,255,255)"> <тело bgcolor="белый">

Приведенные выше строки кода установят белый цвет фона веб-страницы.

Установка цвета фона таблицы

Чтобы установить один цвет фона для всей таблицы, используйте атрибут bgcolor внутри тега

<граница таблицы = "1" >

Вывод:

Вот	таблица с
цвет фона	апельсин

Вот	стол с
цвет фона	оранжевый

Установка цвета фона строки таблицы

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

<граница таблицы="1"> Эта таблица ряд желтый Эта таблица ряд зеленый

Вывод:

Эта таблица	ряд желтый
Этот стол	ряд зеленый

Установка цвета фона ячейки таблицы

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

<граница таблицы="1"> <тд> Эта ячейка имеет белый цвет фона Цвет фона не указан Эта ячейка имеет синий цвет фона Цвет фона не указан

Вывод:

Эта ячейка имеет белый цвет фона	Цвет фона не указан
Эта ячейка имеет синий цвет фона	Цвет фона не указан

Добавление фонового изображения к элементам

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

Добавление фонового изображения на веб-страницу

В приведенном выше коде URL — это относительный путь в первой строке и абсолютный путь во второй строке.

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

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

<граница таблицы = "1" > Эта таблица будет небо фоновое изображение

Вывод:

Эта таблица	будет
небо	фоновое изображение

ПРИМЕЧАНИЕ. Если у вас есть элемент, размеры которого больше размера изображения, установленного в качестве фона, изображение будет повторяться.Вы можете увидеть это в действии в приведенном выше примере. Изображение начинает повторяться сразу после буквы «u» в слове «фон».

Выбор хорошего фона

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

При установке цвета фона….

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

Примеры удачных комбинаций цвета фона/текста:

Черный текст на сером фоне Средний синий текст на очень светло-голубом фоне Оранжевый текст на черном фоне Черный текст на белом фоне Зеленый текст на голубом фоне

Выбор хорошей цветовой схемы иногда может быть трудным и сложным процессом. Чтобы помочь вам в этом, посетите веб-сайт colorblender.com. Вы выбираете цвет или цвета, и он в режиме реального времени сообщит вам, какие цвета подходят к нему.

При установке фонового изображения.

…

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

При установке фонового изображения вы должны задать себе следующие вопросы:

Насколько фоновое изображение увеличит время загрузки страницы?
Очевидно, что фоновое изображение увеличит время загрузки, поскольку это отдельный файл, но насколько? Если это на несколько секунд, то ничего страшного, но если это, скажем, 15 секунд, 20 секунд или даже больше, чем это, это нехорошо.Такая задержка может (и часто причиняет) неудобства посетителям веб-сайтов.
Как будет выглядеть фоновое изображение при его повторении?
Как указано выше, если у вас есть элемент, размеры которого больше размера изображения, которое вы установили в качестве фона, изображение будет повторяться. Вы можете увидеть это в действии на примере фонового изображения таблицы выше. Вы должны убедиться, что фоновое изображение выглядит нормально, когда оно повторяется, и что веб-страница не выглядит непривлекательно и/или не создает путаницы.
Будет ли фоновое изображение отвлекать посетителя от содержимого страниц?
Иногда бывает так, что фоновое изображение настолько привлекательно/непривлекательно/подчеркнуто каким-то образом, что отвлекает внимание посетителей веб-страницы и заставляет их обращать внимание на изображение, а не на фактическое содержание страницы. Вы должны попытаться сосредоточиться на достижении баланса между фоном страницы и ее содержимым, где фон достаточно хорош, чтобы добавить эстетическое качество веб-странице, но недостаточно хорош, чтобы отвлекать внимание посетителей вашей веб-страницы.

Переход на УСБ

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

Атрибуты bgcolor и background устарели, и вместо них следует использовать CSS.

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

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

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

Установить или изменить цвет фона HTML

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

Определение и использование.

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

Установка свойства background-color в элементе HTML

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

Пример 1:

  
        
        <голова>
            Документ
        
            <тело>

Вот как приведенный выше HTML-код будет отображаться в браузере:

Можем ли мы установить цвет фона HTML в элементе? Да мы можем.Например, мы изменим цвет фона элемента

Пример 2:

  
        
        <голова>
            Документ
        
            <тело>

                <дел>
                     Окрашивание фона элемента div 
                    Это абзац



                <дел>
                     Окрашивание фона элемента div 
                    Это абзац



                <дел>
                     Окрашивание фона элемента div 
                    Это абзац

Вот как приведенный выше HTML-код будет отображаться в браузере:

Установка цвета фона с помощью шестнадцатеричного кода цвета

Шестнадцатеричный код цвета со свойством background-color — самый популярный способ задать цвет фона HTML. Шестнадцатеричный цвет имеет хэштег «#» и цветовой код RRGGBB (#RRGGBB). Это пример применения шестнадцатеричного цветового кода непосредственно к HTML-элементу.

Пример 3:

  
        
        <голова>
            Документ
        
            <тело>

                <дел>
                     Окрашивание фона элемента div с помощью шестнадцатеричного цвета 
                    Цвет в шестнадцатеричном формате #FF0000



                <дел>
                     Окрашивание фона элемента div с помощью шестнадцатеричного цвета 
                    Шестнадцатеричный цвет #00FF00



                <дел>
                     Окрашивание фона элемента div с помощью шестнадцатеричного цвета 
                    Цвет в шестнадцатеричном формате #0000FF