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

Сайт 

Содержание

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

» Как изменить цвет фона и текста в 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, основы

Как задавать цвет фона 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

Просмотров: 102757

Цвет фона страницы html | Вопросы и ответы. Все о дизайне и создании сайтов

Цвет фона — это один из важных элементов любой интернет-страницы. Главная задача фона — формировать у пользователя настроение и привлекать внимание, делать восприятие информации на сайте удобным и легким.Атрибуты фона для веб-страниц — тег <body> и bgcolor.

Меняем цвет фона и шрифта в HTML коде сайта

В данной статье речь пойдет о том, как же самостоятельно изменить цвет шрифта и фона в HTML-коде, т.е. на странице сайта. Проще всего сделать это при помощи CSS.

Первое, что необходимо запомнить, цвета в CSS указываются также, как и в HTML. А если подробнее, то вы можете указывать их как в шестнадцатеричном значении, к примеру #ff3355, так и указывать название цвета (red, blue, green и прочие).

А теперь давайте рассмотрим более подробно свойства. Начать стоит со свойства color, которое задает основной цвет или цвет переднего плана любого элемента. К примеру, если вы хотите задать синий цвет для текста, форма записи будет <span style=»color: blue»>оформление текста </span>.

Существует также атрибут background-color, который отвечает за параметры фона. С его помощью можно изменить цвет фона. К примеру, если вы хотите задать фон текста красного цвета, форма записи будет <span style=»background-color: red»>оформление текста </span>.

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

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

Не можете найти ответ на вопрос?

Как изменить фон сайта при перезагрузки

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

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

Приступаем к установке:

Все будет производить скрипт и его нужно выставить, на тех страницах, где вам нужно это обновление и поставить перед /body в каждой странице.

Код

<script>
var backgrounds = [  
  «#fff»,  
  «#3843»,  
  «#ads»  
];  
document. body.style.background = backgrounds[Math.floor(Math.random() * (backgrounds.length + 1))];  
</script>


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

Что по картинкам или фоновым изображением, то эти цветовые гаммы убираем и на их место ставим под ссылки.

Код

«url(ЗДЕСЬ СТАВИМ ССЫЛКУ НА ИЗОБРАЖЕНИЕ 1) top center»,  
«url(ЗДЕСЬ СТАВИМ ССЫЛКУ НА ИЗОБРАЖЕНИЕ 2) top center»,  
«url(ЗДЕСЬ СТАВИМ ССЫЛКУ НА ИЗОБРАЖЕНИЕ 3) top center»,
«url(ЗДЕСЬ СТАВИМ ССЫЛКУ НА ИЗОБРАЖЕНИЕ 4) top center»,  
«url(ЗДЕСЬ СТАВИМ ССЫЛКУ НА ИЗОБРАЖЕНИЕ 5) top center»

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

Источник: Talantlev.ru/

Как поставить картинку на фон сайта html

Как сделать картинку фоном в html, код, примеры, background, image.

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

Картинку на задний фон можно поставить несколькими способами:

1. Вставить код в саму страницу.

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

Как поставить картинку на задний фон страницы?

Пропишем в самой странице код заднего фона.

Опять же, для этого есть несколько вариантов решения:

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

  • Покрывается 100% ширины и высоты страницы
  • Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
  • Сохраняются пропорции картинки (aspect ratio)
  • Изображение центрировано на странице
  • Фон не вызывает скроллов
  • Решение максимально кроссбраузерное
  • Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2

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

Этот способ работает в:

  • Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
  • IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в

Этот способ работает в хороших браузерах и IE 8+.

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

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

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

Выбор картинки

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

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

Хотя, у вас есть возможность обойти систему. Для этого используйте фотошоп и измените размер картинки до ширины экрана (1280х720). Хотя в этом случае при скроллинге вниз, она картинка будет сменять другую.

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

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

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

Итак, вы можете работать в блокноте, я предпочитаю NotePad++. В нем работать гораздо удобнее: код дописывают за тебя, теги подсвечиваются. Программа бесплатная, и весит около 3 Мб. Очень рекомендую, особенно если вы новичок.

Итак, в тег body вам необходимо добавить атрибут background и указать ссылку на изображение, откуда будет взята картинка. Вот как это выглядит в программе.

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

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

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

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

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

Как сделать фон для сайта и как его поменять

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

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

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

Как сделать фон для сайта онлайн

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

О том, как увеличить скорость загрузки блога я писал в предыдущих статьях: «Плагин Hyper Cache» и «Оптимизация базы данных».

Поэтому в качестве картинки для фона лучше всего использовать ПАТТЕРН.

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

Чтобы сделать фон (паттерн) существует огромное число способов. Например, вы можете открыть любой поисковик и вбить в строку поиска запрос «Скачать фон для сайта», а потом долго просматривать различные сайты в надежде отыскать подходящий паттерн.

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

1) PatternCooler

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

Посмотрите, что у меня получилось выбрать для себя:

2) Stripegenerator

Тоже неплохой онлайн генератор фонов. Есть небольшой ряд настроек и немаленькая база заготовок.

Мой результат работы:

3) BgPatterns

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

Посмотрите, что я подобрал себе:

4) Tartanmaker

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

Как поменять фон на сайтах HTML и PHP

Если вы работаете с сайтом разработанным исключительно на HTML, тогда вам понадобиться вставить фон в открывающий тег <body>… Должно получиться примерно следующее:

<body background="images/fon-1.png">

<body background=»images/fon-1.png»>

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

<body bgcolor="#FFFFFF" background="images/fon-1.png">

<body bgcolor=»#FFFFFF» background=»images/fon-1.png»>

Если основной паттерн не загрузится, вместо него подгрузится цвет, указанный в bgcolor (FFFFFF).

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

Для этого я закачиваю картинку (паттерн) на хостинг, папка находится по такому адресу:

/httpdocs/wp-content/themes/Prosumer/images

/httpdocs/wp-content/themes/Prosumer/images

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

Внимание! Если у вас картинка и файлы css темы, расположены в разных директориях, укажите точный путь к ней.

Перезагружаем страницу сайта и смотрим полученный результат.

P.S. Еще хотелось бы добавить, что вы можете настраивать как будет повторяться паттерн. Для этого существует атрибут repeat.

background: #FFFFFF url(images/fon-1.png) repeat;

background: #FFFFFF url(images/fon-1.png) repeat;

Основные настройки:

  • — repeat — изображение будет повторяться как по вертикали, так и по горизонтали;
  • — repeat-x — повторение только по горизонтали;
  • — repeat-y — повторение только по вертикали;
  • — no-repeat – запрет на повторение.

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

Посмотрите видео «Как поменять фон на сайте» и у вас не должно остаться никаких вопросов.

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

CSS-фонов

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

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

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

CSS цвет фона

Свойство background-color определяет цвет фона элемента.

Пример

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

корпус {
фоновый цвет: светло-голубой;
}

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

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

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

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

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

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

Пример

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

,

и

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

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

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

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

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

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

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

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

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

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

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

Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В альфа Параметр — это число от 0. 0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

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

Пример

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

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

Как изменить цвет фона и текста веб-страницы

Обновлено: 21.05.2018 компанией Computer Hope

Ниже приведены инструкции по изменению цвета фона веб-страницы в HTML и CSS.Хотя цвет фона можно задать с помощью тега HTML BODY, мы рекомендуем вам указать значения цвета фона в CSS, как показано ниже.

Кончик

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

Пример CSS

В приведенном ниже примере CSS мы устанавливаем для тела черный цвет фона, добавляя «background-color: # 000;» в корпусе блока. Поскольку цвет фона черный, цвет текста необходимо изменить на более светлый, иначе он не будет виден. Итак, мы устанавливаем белый цвет текста, добавляя «color: #fff;» в блок.

 body {
  семейство шрифтов: Helvetica, Arial, sans-serif;
  цвет фона: # 000;
  цвет: #fff;
}

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

Пример тега HTML-кода

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

Ниже приведены описания каждого из атрибутов HTML в теге body.

ТЕКСТ = Цвет текста.
ССЫЛКА = Цвет ссылок.
VLINK = Цвет посещенной ссылки.
ALINK = Цвет активной ссылки или цвет, на который ссылка меняет при нажатии.
BGCOLOR = Цвет фона страницы.

Кончик

На этой странице ссылка окрашена в синий цвет, ссылки, которые вы уже посетили, — в фиолетовый, а ссылки, на которые вы наводите курсор или нажимаете, — в красный цвет.

Цвет фона HTML: Как настроить фон

Обычная веб-страница имеет белый фон.То же самое с таблицей и текстами. Черный текст на белом фоне очень распространен и скучен. Это было обычным делом в те времена, когда веб-дизайн находился на начальной стадии. Но по мере развития технологий и развития CSS появилось больше возможностей для создания более привлекательных веб-страниц. В настоящее время большинство веб-сайтов имеют красочные веб-страницы. Разработка таких веб-страниц осуществляется путем объединения HTML с CSS. В CSS есть много возможностей для изменения фона всего в HTML. Цвет фона HTML всей страницы, таблиц и даже текста также можно изменить с помощью CSS.В этой другой статье мы предлагаем вам на выбор полную таблицу цветов HTML. Некоторые из способов описаны ниже.

Темы в статье

Цвет фона тела с использованием названий цветов

Одним из наиболее распространенных способов изменения цвета фона HTML веб-страницы является использование простых названий цветов, таких как красный, зеленый, синий и т. Д. Атрибут, используемый для изменения цвета фона — background-color. Ниже приведен пример изменения цвета фона с помощью встроенных стилей.

 


 Эта веб-страница имеет красный цвет фона!

Атрибуту background-color присвоено значение красного цвета. Таким образом, цвет фона HTML теперь красный. Красный можно заменить любым названием цвета.


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

Мир полон красок. Есть много цветов, которые можно использовать при разработке веб-страниц. У каждого цвета есть свое название, например красный, желтый, черный и т. Д.Но у каждого цвета столько оттенков. Например, красный цвет доступен в различных оттенках, таких как темно-красный, светло-красный, малиновый, кирпичный и т. Д. То же самое и со многими другими цветами. Итак, как использовать эти цвета в HTML? Ответом на это является модель RGB. Красный, зеленый и синий цвета можно смешивать, чтобы получить широкий спектр цветов. Каждый из этих оттенков имеет шестизначный код. Этот код известен как шестнадцатеричный цветовой код.

Цветовые коды

Hex также можно использовать с HTML и CSS для изменения цвета фона HTML веб-страницы.Они также используются с атрибутом background-color. Вместо названия цвета используется цифровой знак (#), за которым следует шестизначный код оттенка. Ниже приведен пример изменения цвета фона с помощью метода встроенных стилей CSS.

 


 Это демонстрационная веб-страница

Обратите внимание на приведенный выше код. Все аналогично предыдущему методу, но с небольшими изменениями.Вместо присвоения имени цвета как значения атрибуту background-color используется # FF00FF. # FF00FF — шестнадцатеричный код пурпурного цвета.

Щелкните здесь, чтобы выбрать любой оттенок с его шестнадцатеричным цветовым кодом.

Изменение цвета фона HTML тега div

Что делать, если вы хотите изменить цвет фона HTML только для некоторой части веб-страницы? Это тоже возможно. Div используется для определения подразделения или раздела на веб-странице. Цвет фона таких разделов или разделов также можно изменить с помощью CSS.Есть несколько способов сделать это. Но я объясню самые простые и быстрые из них, то есть встроенные стили.

 




 Цвет фона этого тега div красный, а цвет фона этой веб-страницы - желтый

В приведенном выше коде цвет фона веб-страницы желтый, а у части div красный фон. В теге div встроенный стиль используется для установки красного цвета фона. # FFF00 и # FF0000 — это шестнадцатеричные коды цветов желтого и красного соответственно.


Изменение цвета фона таблицы

Таблицы играют важную роль в веб-дизайне. У таблиц много ролей. Столы также должны выглядеть привлекательно. Есть много способов, с помощью которых стол может выглядеть лучше и привлекательнее. Один из таких способов — задать цвет фона. Подобно тегу body и тегу div, тегу таблицы также могут быть присвоены встроенные стили с атрибутом background-color. Ниже приведен пример таблицы с тремя строками и тремя столбцами и зеленым фоном (# 00FF00).

 

<стиль>
table, th, td {
граница: сплошной черный 1px;
}



<таблица>

 Имя 
 Страна 
 Возраст 


 Джон 
 США 
 21 



 Сэм 
 Испания 
 22

В приведенном выше коде встроенный стиль используется в теге таблицы. Это изменит фон всей таблицы. Если вы хотите изменить цвет фона определенной строки, добавьте встроенные стили с атрибутом background-color в теге tr. Сделайте то же самое с тегом td, если вы хотите изменить цвет фона определенного столбца.


Изменение цвета фона текста

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

 


  у этого текста нет цвета фона  


  этот текст имеет красный цвет фона  


  этот текст имеет зеленый цвет фона

В приведенном выше коде первый абзац не имеет цвета фона.У второго абзаца фон красного (# FF0000) цвета, а у третьего абзаца фон зеленого (# 00FF00) цвета.

Заключение

С цветами все выглядит лучше. Цвета играют большую роль в веб-дизайне. В начале истории Интернета на экранах не было цветов. Итак, первые реализации HTTP / HTML не имели такой поддержки. Они часто используются в HTML и CSS для создания привлекательных веб-страниц. Цвета могут быть применены ко всей веб-странице или к некоторой ее части с помощью тега div.Таблицам также можно задать цвет фона HTML. Даже определенные строки и столбцы также могут иметь цвет фона. Цвет фона также можно применить к тексту с помощью тега span. HTML и CSS предоставляют множество возможностей для изменения цвета фона практически всего. Следует только знать, как эффективно использовать эти параметры, чтобы веб-сайты выглядели более привлекательно и лучше.

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

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

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

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


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

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

Пример 1: 

  
        
        
             Документ

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

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

.

Пример 2: 

  
        
        
             Документ 
        
            

                

                     
 Раскрашивание фона элемента div 
 
                    
 Это абзац 

                


                

                     
 Раскрашивание фона элемента div 
 
                    
 Это абзац 

                


                

                     
 Раскрашивание фона элемента div 
 
                    
 Это абзац

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

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

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

Пример 3: 

  
        
        
             Документ 
        
            

                

                     
 Раскрашивание фона элемента div с использованием шестнадцатеричного цвета 
 
                    
 Цвет шестигранника # FF0000 

                


                

                     
 Раскрашивание фона элемента div с использованием шестнадцатеричного цвета 
 
                    
 Цвет шестнадцатеричного # 00FF00 

                


                

                     
 Раскрашивание фона элемента div с использованием шестнадцатеричного цвета 
 
                    
 Цвет шестнадцатеричного кода # 0000FF

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


Установить цвет фона с помощью имени цвета HTML

Второй способ установить цвет фона в HTML — использовать имя цвета HTML.Название цвета — это самый простой способ изменить цвет в HTML-документе. Просто введите название цвета, например Red, Green или Blue, со свойством background-color.

Пример 4: 

  
        
        
             Документ 
        
            

                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета Красный 

                


                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета: зеленый 

                


                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета: синий 

                


                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета Голубой 

                


                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета Пурпурный 

                


                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета Желтый

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

Установить цвет фона с использованием значений цвета RGB

Теперь мы установим свойство HTML background-color, используя значения RGB.Используйте тот же атрибут стиля, что и раньше, но замените шестнадцатеричный цвет или имя цвета на значения RGB.

Пример 5: 

  
            
            
                 Документ 
            
                

                    

                         
 Раскрашивание фона элемента div с использованием значений RGB 
 
                        
 Значения RGB rgb (255,0,0) 

                    


                    

                         
 Раскрашивание фона элемента div с использованием значений RGB 
 
                        
 Значения RGB rgb (0,255,0) 

                    


                    

                         
 Раскрашивание фона элемента div с использованием значений RGB 
 
                        
 Значения RGB rgb (0,0,255)

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

При использовании значений RGB у вас есть дополнительная опция для установки, указывающая уровень непрозрачности с альфа-каналом.Это будет контролировать уровень прозрачности фона. Альфа объявляется с «а». Если используется альфа, код формата — «rgba». Значение альфа — 0 и 1, 0 для полной прозрачности и 1 для непрозрачности. Это пример использования значений «rgba».

Пример 6: 

  
            
            
                 Документ 
            
                

                    

                         
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 
 
                        
 rgba (255,0,0,0.5) 

                    


                    

                         
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 
 
                        
 rgba (0,255,0,0.5) 

                    


                    

                         
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 
 
                        
 rgba (0,0,255,0.5)

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

Установить цвет фона с использованием значений цвета HSL

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

Пример 7: 

  
        
        
             Документ

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


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

Пример 8: 

  
        
        
             Документ 
        
        

            

                 
 Раскрашивание фона элемента div с помощью HSL с альфа-каналом 
 
                
 hsla (0,100%, 50%, 0,5)

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

Есть несколько способов установить или изменить цвет фона HTML.Это так легко и просто, запомните это, если вы хотите установить цвет, используйте атрибут «style» и свойство CSS background-color. Синтаксис такой:

  <тег>

Если вы хотите узнать больше о цветовом коде, вы можете увидеть в предыдущем руководстве о цветовых кодах HTML. Вы можете найти полный исходный код этих примеров на нашем GitHub.

Это только основное. Если вам нужно больше узнать о HTML, CSS, Javascript или других подобных областях, вы можете пройти следующий дешевый курс:

Спасибо!

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

Что нужно знать

  • Самый простой: добавьте свойство стиля background-color к тегу таблицы, строки или ячейки.
  • Следующее самое простое: используйте атрибут bgcolor .

В этой статье объясняются методы изменения цвета фона частей таблицы на веб-сайте.

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

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

В этом примере изменяется цвет фона всей таблицы:

Чтобы изменить цвет отдельной строки, вставьте свойство background-color в

Вы можете изменить цвет отдельной ячейки, добавив атрибут в

Вы также можете применить цвета фона к заголовкам таблиц или

Изменить цвет фона с помощью таблиц стилей

Однако лучше избегать использования атрибута background-color в пользу правильно отформатированной таблицы стилей.Например, вы можете установить стили в таблице стилей в HEAD вашего HTML-документа или установить их во внешней таблице стилей. Подобные изменения в HEAD или внешней таблице стилей могут выглядеть следующим образом для таблиц, строк и ячеек:

таблица {цвет фона: # ff0000; } 
 tr {цвет фона: желтый; } 
 td {background-color: # 000; }
class = «ql-syntax»>

Настройка цвета фона столбца

Лучший способ установить цвет фона для столбца — создать класс стиля, а затем назначить его ячейкам столбца.Создание класса позволяет вам назначать этот класс ячейкам в определенном столбце с помощью одного атрибута.

CSS :

td.ColColor {цвет фона: синий; }
class = «ql-syntax»>

HTML :

 
 ячейка 1 ячейка 2 ячейка 1 ячейка 2
class = «ql-syntax»>

Одним из значительных преимуществ управления цветами фона с помощью таблицы стилей является то, что вы можете изменить свой выбор цвета позже. Вместо того, чтобы просматривать HTML-документ и вносить изменения в каждую отдельную ячейку, вы можете внести одно изменение в выбор цвета в CSS, которое будет немедленно применяться к каждому экземпляру, где появляется синтаксис class = «ColColor» .

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

фон — CSS: каскадные таблицы стилей

background сокращенное свойство CSS устанавливает сразу все свойства стиля фона, такие как цвет, изображение, начало и размер или метод повтора.

 
фон: зеленый;


фон: url ("test.jpg") repeat-y;


фон: рамка красная;


фон: без повтора центр / 80% url ("../ img / image.png");

Свойство background определяется как один или несколько фоновых слоев, разделенных запятыми.

Синтаксис каждого уровня следующий:

  • Каждый уровень может включать в себя ноль или одно вхождение любого из следующих значений:
    • <приложение>
    • <позиция>
    • <размер>
    • <стиль повторения>
  • Значение можно включать только сразу после <позиция> , разделенных символом ‘/’, например: « center / 80% ».
  • Значение может быть включено ноль, один или два раза. Если он включен один раз, он устанавливает как background-origin , так и background-clip . Если он включен дважды, первое вхождение устанавливает background-origin , а второе устанавливает background-clip .
  • Значение может быть включено только в последний указанный слой.
 [,] *  
, где 
   =  ||  [/ ]? || <стиль повторения> || <приложение> ||  ||  
  = <'background-color'> ||  ||  [/ ]? || <стиль повторения> || <приложение> ||  ||   
 
, где 
   = none |  
  = [[слева | центр | право | наверх | внизу | <длина-процент>] | [слева | центр | право | <длина- процент>] [наверх | центр | внизу | <длина-процент>] | [центр | [слева | справа] <длина-процент>? ] && [центр | [наверх | внизу] <длина-процент>? ]] 
  = [ | авто] {1,2} | крышка | содержат 
  = repeat-x | повторять-у | [повторить | пространство | круглый | без повтора] {1,2} 
  = scroll | фиксированный | local 
  = рамка-рамка | обивка | content-box  
 
, где 
   =  | <изображение ()> | <набор изображений ()> |  | <краска ()> | <плавное затухание ()> | <градиент> 
 <длина-процент> = <длина> | <процент>  
 
 где 
   = image (? [?, ?]!) 
  = image-set ( #) 
  = element () 
  = paint (, ?) 
 <переходное затухание ()> = плавное затухание (, ?) 
  =  | <повторяющийся линейный градиент ()> | <радиальный градиент ()> | <повторяющийся радиальный градиент ()> |   
 
, где 
   = ltr | rtl 
  =  | <строка> 
 <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <устаревший-системный-цвет> 
  = [ | <строка>] [<разрешение> || type ()] 
  =  
  = <процент>? && <изображение> 
  = <изображение> |  
  = linear-gradient ([ | to ]?, ) 
  = повторяющийся-линейный-градиент ([<угол> | до <бокового-или-угла>]?, <список-остановок-цветов>) 
 <радиальный-градиент ()> = радиальный градиент ([<конечная-форма> || ]? [at ]?, ) 
  = повторяющийся-радиальный-градиент ([ || ]? [at ]?, ) 
  = conic-gradient ([from ]? [at ] ?, )  
 
 где 
   = rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) 
  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?) 
  = hsl (   [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
 <сторона-или-угол> = [слева | справа] || [наверх | внизу] 
 <список-остановок-цветов> = [<остановка-цветов> [, <подсказка-цветов>]? ] #,  
  = круг | эллипс 
 <размер> = ближайшая сторона | дальняя сторона | ближайший угол | дальний угол | <длина> | <длина-процент> {2} 
 <позиция> = [[слева | центр | справа] || [наверх | центр | внизу] | [слева | центр | право | <длина- процент>] [наверх | центр | внизу | <длина-процент>]? | [[слева | справа] <длина-процент>] && [[вверх | снизу] <длина-процент>]] 
 <угловой-список-остановок> = [<угловой-цвет-стоп> [, <угловой-цвет-подсказка>]? ] #, <угловой-цветной-стопор>  
 
, где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> | <угол> 
  =  ? 
 <линейный-цвет-подсказка> = <длина-процент> 
 <угловой-цвет-остановка> = <цвет> && <цвет-стоп-угол>? 
  =   
 
 где 
   =  {1,2} 
  = <угол процент> {1,2} 
 <угол-процент> = <угол> |

background-size — CSS: каскадные таблицы стилей

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

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

 
размер фона: обложка;
размер фона: содержать;



размер фона: 50%;
размер фона: 3.2em;
размер фона: 12 пикселей;
размер фона: авто;



размер фона: 50% авто;
размер фона: 3em 25%;
размер фона: авто 6 пикселей;
размер фона: авто авто;


размер фона: авто, авто;
размер фона: 50%, 25%, 25%;
размер фона: 6 пикселей, авто, содержать;


размер фона: наследовать;
размер фона: начальный;
размер фона: не задано;

Свойство background-size задается одним из следующих способов:

  • Использование значений ключевого слова содержит или охватывает .
  • Используется только значение ширины, и в этом случае высота по умолчанию — auto .
  • Использование значения ширины и высоты, в этом случае первое устанавливает ширину, а второе — высоту. Каждое значение может быть <длина> , <процент> или авто .

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

Значения

содержат
Масштабирует изображение как можно больше в пределах его контейнера без обрезки или растяжения изображения.Если контейнер больше изображения, это приведет к мозаике изображения, если для свойства background-repeat установлено значение no-repeat .
крышка
Масштабирует изображение как можно больше, чтобы заполнить контейнер, при необходимости растягивая изображение. Если пропорции изображения отличаются от элемента, оно обрезается либо по вертикали, либо по горизонтали, чтобы не оставалось пустого места.
авто
Масштабирует фоновое изображение в соответствующем направлении с сохранением его внутренних пропорций.
<длина>
Растягивает изображение в соответствующем размере до указанной длины. Отрицательные значения не допускаются.
<процент>
Растягивает изображение в соответствующем измерении до указанного процента от области позиционирования фона . Область позиционирования фона определяется значением background-origin (по умолчанию поле заполнения). Однако, если значение background-attachment фона равно fixed , область позиционирования вместо этого является всем окном просмотра.Отрицательные значения не допускаются.

Внутренние размеры и пропорции

Вычисление значений зависит от внутренних размеров изображения (ширина и высота) и внутренних пропорций (отношение ширины к высоте). Эти атрибуты следующие:

  • Растровое изображение (например, JPG) всегда имеет собственные размеры и пропорции.
  • Векторное изображение (например, SVG) не обязательно имеет внутренние размеры. Если он имеет как горизонтальные, так и вертикальные внутренние размеры, он также имеет внутренние пропорции.Если у него нет размеров или только одно измерение, оно может иметь или не иметь пропорций.
  • CSS <градиент> s не имеют внутренних размеров или внутренних пропорций.
  • Фоновые изображения, созданные с помощью функции element () , используют внутренние размеры и пропорции генерирующего элемента.

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

На основе внутренних размеров и пропорций визуализированный размер фонового изображения вычисляется следующим образом:

Если указаны оба компонента background-size , а не auto :
Фоновое изображение отображается с указанным размером.
Если размер фона — это , содержать или обложку :
Сохраняя свои внутренние пропорции, изображение визуализируется с максимальным размером, содержащимся в области позиционирования фона или покрывающей ее.Если изображение не имеет внутренних пропорций, оно отображается с размером области позиционирования фона.
Если размер фона — это авто или авто авто :
  • Если изображение имеет как горизонтальные, так и вертикальные внутренние размеры, оно отображается с этим размером.
  • Если изображение не имеет внутренних размеров и внутренних пропорций, оно отображается с размером области позиционирования фона.
  • Если изображение не имеет внутренних размеров, но имеет внутренние пропорции, оно отображается так, как если бы вместо него было указано , содержащее .
  • Если изображение имеет только одно внутреннее измерение и внутренние пропорции, оно отображается в размере, соответствующем этому одному измерению. Другое измерение вычисляется с использованием указанного размера и внутренних пропорций.
  • Если изображение имеет только одно внутреннее измерение, но не имеет внутренних пропорций, оно визуализируется с использованием указанного измерения и другого измерения области позиционирования фона.
Примечание: SVG-изображения имеют атрибут preserveAspectRatio , который по умолчанию эквивалентен содержит ; явный background-size заставляет игнорировать preserveAspectRatio .
Если background-size имеет один компонент auto и один компонент не auto :
  • Если изображение имеет внутренние пропорции, оно растягивается до указанного размера. Неуказанный размер вычисляется с использованием указанного размера и внутренних пропорций.
  • Если изображение не имеет внутренних пропорций, оно растягивается до указанного размера. Неуказанный размер вычисляется с использованием соответствующего внутреннего размера изображения, если таковой имеется.Если такого внутреннего размера нет, он становится соответствующим размером области позиционирования фона.

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

Работа с градиентами

Если вы используете <градиент> в качестве фона и указываете для него размер фона , лучше не указывать размер, который использует один компонент auto или указан используя только значение ширины (например, background-size: 50% ).Рендеринг <градиент> в таких случаях изменен в Firefox 8 и в настоящее время обычно несовместим между браузерами, которые не все реализуют рендеринг в полном соответствии со спецификацией CSS3 background-size и градиентом CSS3 Image Values. Технические характеристики.

  .gradient-example {
  ширина: 50 пикселей;
  высота: 100 пикселей;
  фоновое изображение: линейный градиент (синий, красный);

  
  размер фона: 25 пикселей;
  размер фона: 50%;
  размер фона: авто 50 пикселей;
  размер фона: авто 50%;

  
  размер фона: 25 пикселей 50 пикселей;
  размер фона: 50% 50%;
}

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

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

Мозаика для большого изображения

Давайте рассмотрим большое изображение, изображение логотипа Firefox размером 2982×2808.

No related posts.

Автор записи

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

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