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

Leave a Comment / Html / By /

HTML — Фоны — CoderLessons.com

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

  • HTML фон с цветами
  • HTML фон с изображениями

Теперь давайте рассмотрим оба подхода по очереди на соответствующих примерах.

HTML фон с цветами

Атрибут bgcolor используется для управления фоном элемента HTML, в частности, фоном тела страницы и таблицы.

Примечание . Атрибут bgcolor устарел в HTML5. Не используйте этот атрибут.

Примечание . Атрибут bgcolor устарел в HTML5. Не используйте этот атрибут.

Ниже приведен синтаксис использования атрибута bgcolor с любым тегом HTML.

<tagname bgcolor = "color_value"...>

Это color_value может быть дано в любом из следующих форматов —

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

пример

Вот примеры для установки фона тега HTML —

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

Это даст следующий результат —

HTML фон с изображениями

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

Примечание . Атрибут фона в HTML5 устарел. Не используйте этот атрибут.

Примечание . Атрибут фона в HTML5 устарел. Не используйте этот атрибут.

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

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

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

<tagname background = "Image URL"...>

Наиболее часто используемые форматы изображений — изображения JPEG, GIF и PNG.

пример

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

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html. gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

Это даст следующий результат —

Узорные и прозрачные фоны

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

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

пример

Вот примеры, чтобы установить фоновый узор таблицы —

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1. gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

Это даст следующий результат —

Тест: Основы HTML №2 — Информатика 8 класс

Тест: Основы HTML №2 — Информатика 8 класс

Английский язык

Астрономия

Белорусский язык

Биология

География

ИЗО

Информатика

История

Итальянский язык

Краеведение

Литература

Математика

Музыка

Немецкий язык

ОБЖ

Обществознание

Окружающий мир

ОРКСЭ

Русский язык

Технология

Физика

Физкультура

Химия

Черчение

Для учителей

Дошкольникам

VIP — доступ

  • Предметы
    • »
  • Информатика
    • »
  • 8 класс
    • »
  • Основы HTML №2

Основы HTML №2

Тест на знание тегов HTML

Информатика 8 класс | Автор: Солдатова В. Ю. | ID: 9884 | Дата: 14.12.2017

Помещать страницу в закладки могут только зарегистрированные пользователи
Зарегистрироваться

Вопрос № 1

Выберите правильный HTML тег для преобразования обычного текста в курсивный:

italic
i
italian
il
irc

Вопрос № 2

Кто задаёт Web стандарты?

Microsoft
Mozilla
Apple

Google
Все вышеуказанные производители
Консорциум Всемирной Паутины

Вопрос № 3

HTML — это аббревиатура от:

Hyperlinks Text Markup Language
Hyper Text Makeup Language
Home Tool Markup Language
Hyper Text Markup Language
Hyper Tool Makeup Language

Вопрос № 4

Как создать e-mail ссылку

a href=»mailto:xxx@yyy»
a href=»xxx@yyy»
mail:xxx@yyy
mail href=»xxx@yyy»
mail href=»mailto:xxx@yyy»

Вопрос № 5

Выберите правильный вариант установки цвета фона страницы:

background:yellow
body
body background=»yellow»
body background=»background-color:yellow»

body background=yellow

Вопрос № 6

Как открыть ссылку в новой вкладке?

a href=»url» new
a href=»url» target=»_blank»
a href=»url» target=»new»
a href=» target new»
a href=» target-new»

Вопрос № 7

Выберите правильный способ создания ссылки:

<a> http://www. w3schools.com </a>
<a> alt=»http://www.w3schools.com»>W3Schools.com</a>
<a> name=»http://www.w3schools.com»>W3Schools.com</a>
<a> url=»http://www.w3schools.com»>W3Schools.com</a>
<a> href=»http://www.w3schools.com»>W3Schools</a>

Вопрос № 8

Выберите правильный HTML тег для принудительного переноса текста на новую строку БЕЗ образования абзаца:

break
lb
enter
br
p

Вопрос № 9

Выберите HTML тег для самого крупного заголовка

heading
head
h6
h2
H8

Вопрос № 10

На сайте внутри папки pages находится файл page.html. А внутри папки images находится файл foto.jpg. Причём папки images и pages лежат в корне сайта. Как правильно написать путь к foto.jpg из файла page.html:

pages/images/foto.jpg
../images/foto.jpg
../images/pages/foto.jpg
images/foto.jpg
_http://images/foto.jpg

Показать ответы

Получение сертификата
о прохождении теста

Доступно только зарегистрированным пользователям

© TestEdu.ru 2013-2022

E-mail администратора: [email protected]

Что такое фоновый тег в HTML? (с изображением)

`;

Интернет

Факт проверен

М. Дж. Брауэр

В HTML нет такой вещи, как фоновый тег. То, что в старых версиях HTML можно было назвать фоновым тегом — фоновый атрибут HTML-тега — использовалось для отображения фонового изображения веб-страницы. Текущая рекомендация консорциума World Wide Web (W3C) — HTML 4.01/XHTML 1.0. В этой рекомендации атрибут фона устарел : он больше не считается допустимым HTML. Связанный атрибут bgcolor , который можно считать фоновым тегом, также устарел.

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

Свойства фона включают background-color , background-image , background-attachment , background-position и background-repeat . Все эти свойства можно объединить в свойстве фона вместо того, чтобы задавать их как отдельные свойства. Это называется сокращенным свойством.

Как и старый атрибут bgcolor, background-color может быть представлен в виде значения RGB, шестнадцатеричного кода или имени цвета. Фон любого элемента, к которому применяется это свойство, будет отображаться в этом цвете. Значением background-image является URL-адрес изображения.

Другие свойства — background-attachment, background-position и background-repeat — можно определить, но если это не так, будут использоваться значения по умолчанию. Background-repeat используется для повторения фона по вертикали или по горизонтали; по умолчанию он повторяется по вертикали и горизонтали. Background-attachment заставляет фоновое изображение либо прокручиваться вместе с остальной частью страницы, что является значением по умолчанию, либо оставаться на одном месте. Значение background-position по умолчанию — верхний левый угол элемента.

Различные веб-браузеры могут по-разному отображать свойства фона или требовать более конкретных определений в CSS. Например, несмотря на то, что Internet Explorer® 8 поддерживает значение наследования для некоторых свойств, он не поддерживает его для фоновых свойств. В Firefox® свойство background-position не работает должным образом, если для свойства background-attachment не задано значение fixed. Разработчики должны тестировать свои страницы в различных браузерах, чтобы убедиться, что страницы отображаются правильно.

ПОКАЗАНО НА:

html — Как определить цвет фона сайта?

Как определить цвет фона сайта (чтобы использовать этот цвет в Photoshop)? Я просмотрел исходный код, но я недостаточно хорошо знаю код, чтобы понять, что к чему…

  • html
  • css

Щелкните правой кнопкой мыши на веб-странице и выберите «Проверить элемент» . Затем посмотрите вправо на вкладке «Стили» (при условии, что вы используете Chrome), а затем под тем местом, где написано:

 .сайт {
цвет фона: #f8f3ef;

Это цвет (#f8f3ef). Для справки в будущем вам, возможно, придется немного поискать в Inspect Element в следующий раз и просто найти «background-color», а затем цветовой код.

  1. Просмотр исходного кода с помощью таких инструментов, как Firebug или Chrome Developer Tools, упростит эту задачу. Вы можете проверить элемент, в данном случае фон, и увидеть применимые к нему правила CSS.

  2. Используйте расширение для браузера, например Colorzilla, чтобы щелкнуть и сказать, какой цвет.

1

Это #f8f3ef , иногда я просто делаю копию экрана печати в Photoshop, а затем беру цвет. Но этот метод является самым ленивым для Firebug.

В большинстве браузеров вы можете нажать F12, чтобы открыть набор инструментов разработчика для проверки страницы. Оттуда вы можете щелкнуть значок поиска и щелкнуть элемент, для которого вы хотите увидеть цвет фона, а затем найти background-color 9.0078 свойство css:

Или, если вы часто делаете это, вы можете использовать расширение для браузера (например, ColorZilla в Chrome), чтобы упростить поиск точных цветов на веб-страницах:

Ищите :

 цвет фона:

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

 #ece7e3

Значение имеет формат # и 2 шестнадцатеричных символа для количества красного, 2 шестнадцатеричных символа для количества зеленого и 2 шестнадцатеричных символа для количества синего, все вместе образуют один цвет. отдельные значения должны быть от 00 до FF.

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

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

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