Как да добавите фон към уебсайт: 14 стъпки (със снимки)

Съдържание:

Как да добавите фон към уебсайт: 14 стъпки (със снимки)
Как да добавите фон към уебсайт: 14 стъпки (със снимки)

Видео: Как да добавите фон към уебсайт: 14 стъпки (със снимки)

Видео: Как да добавите фон към уебсайт: 14 стъпки (със снимки)
Видео: Настя и сборник весёлых историй 2024, Април
Anonim

Фонът е един от най -важните елементи на уебсайта. Добрият фон създава тон на уебсайта и допълва съдържанието. Има много различни начини за добавяне на фон, всеки начин с различна цел. Някои методи ви позволяват да приложите фона към всички страници в уебсайт, докато други ограничават фона само до определена страница. Тази статия ви учи как да добавите фон към вашия уебсайт с помощта на HTML или CSS.

Стъпки

Метод 1 от 2: HTML методи

Плътен цветен фон

Добавяне на фон към уебсайт Стъпка 1
Добавяне на фон към уебсайт Стъпка 1

Стъпка 1. Плътният цвят фон е най -основният тип фон, който можете да поставите на уебсайт

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

Добавяне на фон към уебсайт Стъпка 2
Добавяне на фон към уебсайт Стъпка 2

Стъпка 2. Отворете вашия уеб код (източник)

Добавяне на фон към уебсайт Стъпка 3
Добавяне на фон към уебсайт Стъпка 3

Стъпка 3. В етикета body добавете атрибут, наречен bgcolor

Сега вашият body tag трябва да изглежда така-

където COLORNAME е името на цвета. COLORNAME може да бъде изпълнен с много видове цветови представители-

  • (име на цвят)
  • (шестнадесетична стойност)
  • (RGB стойност)
Добавяне на фон към уебсайт Стъпка 4
Добавяне на фон към уебсайт Стъпка 4

Стъпка 4. Експериментирането с RGB и # може да доведе до много нюанси, но можете да вземете лесния първи начин

Но не забравяйте, че въвеждането на необичаен цвят като „Ultramarine Bluish Green“ще доведе до бяло.

Добавяне на фоново изображение

Добавянето на фоново изображение е малко по -сложно от едноцветен фон

Добавяне на фон към уебсайт Стъпка 5
Добавяне на фон към уебсайт Стъпка 5

Стъпка 1. Добавете свойството background към body tag, така че да изглежда така-

където SRC е източникът на изображението SRC може да бъде в същата папка или друга папка/уеб страница.

  • (в същата папка)
  • (в друга папка)
  • (в друга уеб страница)
Добавяне на фон към уебсайт Стъпка 6
Добавяне на фон към уебсайт Стъпка 6

Стъпка 2. Не забравяйте да въведете разширението.gif /-j.webp" />

Метод 2 от 2: CSS методи

Добавяне на фон към уебсайт Стъпка 6
Добавяне на фон към уебсайт Стъпка 6

Плътен цветен фон

Добавяне на фон към уебсайт Стъпка 7
Добавяне на фон към уебсайт Стъпка 7

Стъпка 1. За да добавите плътен цветен фон в CSS, добавете атрибут на стил

Можете също така да давате идентификационни номера и класове и да използвате както външни, така и вътрешни таблици със стилове.

Добавяне на фон към уебсайт Стъпка 8
Добавяне на фон към уебсайт Стъпка 8

Стъпка 2. Вашият таг за тяло трябва да изглежда така-

където COLORNAME е името на цвета, шестнадесетичната стойност или RGB (Също така запомнете последните стъпки на плътния цветен фон в HTML, те са приложими и тук).

Добавяне на изображение

Добавяне на фон към уебсайт Стъпка 9
Добавяне на фон към уебсайт Стъпка 9

Стъпка 1. За да добавите изображение, добавете атрибута style към маркера body

Можете също така да давате идентификационни номера и класове и да използвате както външни, така и вътрешни таблици със стилове.

Добавяне на фон към уебсайт Стъпка 10
Добавяне на фон към уебсайт Стъпка 10

Стъпка 2. Вашият таг за тяло сега трябва да изглежда така-

Добавяне на фон към уебсайт Стъпка 11
Добавяне на фон към уебсайт Стъпка 11

Стъпка 3. Не забравяйте, че източникът е SRC

Тя може да бъде от същата папка, различна папка или друга уеб страница.

  • (в същата папка)
  • (в друга папка)
  • (в друга уеб страница).
Добавяне на фон към уебсайт Стъпка 12
Добавяне на фон към уебсайт Стъпка 12

Стъпка 4. Не забравяйте да добавите и.extensions

Повтарящ се модел с фон

Добавяне на фон към уебсайт Стъпка 13
Добавяне на фон към уебсайт Стъпка 13

Стъпка 1. За да направите фон с повтарящ се модел, добавете фон, както е казано в стъпките по -горе

Вашият таг за тяло сега трябва да бъде променен на-

Където REPEAT-SETTINGS са настройките. Може да има много повтарящи се настройки, като например

  • (Фонът ще се повтаря както вертикално, така и хоризонтално.)
  • (Фонът ще се повтаря хоризонтално.)
  • (Фонът ще се повтаря вертикално.)

Фон с фиксирано изображение

Добавяне на фон към уебсайт Стъпка 14
Добавяне на фон към уебсайт Стъпка 14

Стъпка 1. Фоновете с фиксирани изображения изглеждат готини и не се променят, докато превъртате надолу

За да ги направите, просто трябва да направите някои прости корекции на кода в горния раздел. Направете ощипванията, за да направите тагът на тялото да изглежда така-

където SRC е източникът на фоновото изображение, POSITION е позицията на изображението (може да варира от центъра до горния десен ъгъл); background-attachment е основният „катализатор“на този тип фон. Използва се за определяне на позицията на фона и се препоръчва да не се променя.

Препоръчано: