Фон на началната страница в html. За тези, които искат да знаят по-добре
Много начинаещи дизайнери на оформление, просто навлизайки в същността на създаването на уебсайтове, често се чудят как да направят фона изображение в html. И дори ако някои хора могат да разберат тази задача, все още възникват проблеми при разтягане на изображението по цялата ширина на монитора. В същото време бих искал сайтът да се показва еднакво във всички браузъри, така че трябва да се спазва изискването за кръстосани браузъри. Можете да зададете фона по два начина: като използвате CSS стил. Всеки избира най-много за себе си най-добър вариант. Разбира се, CSS стилът е много по-удобен, защото неговият код се съхранява в отделен файли не заема допълнителни колони в основните тагове на сайта, но първо ще разгледаме прост метод за инсталиране на изображение на фона на сайта.
Основни HTML тагове за създаване на фон
И така, нека да преминем към въпроса, фон в html на целия екран. За да изглежда сайтът красив, трябва да разберете едно нещо: важна подробност: достатъчно лесно за изпълнение градиентен фонили го боядисайте в плътен цвят, но ако трябва да вмъкнете картина на фона, тя няма да се простира по цялата ширина на монитора. Първоначално трябва да изберете изображение или да направите сами дизайн с разширението, в което ще се показва страницата на вашия сайт. Едва след фоново изображениеготово, преместете го в папка, наречена „Изображения“. В него ще съхраняваме всички използвани картинки, анимации и други графични файлове. Тази папка трябва да е вътре главна директорияс всичките ви html файлове. Сега можете да преминете към кода. Има няколко опции за писане на код, който ще промени фона на картина.
- Напишете атрибут на етикет.
- Чрез CSS стил в HTML код.
- Напишете CSS стил в отделен файл.
Как да направите фоново изображение в HTML зависи от вас, но бих искал да кажа няколко думи за това как би било най-оптимално. Първият метод, използващ писане чрез атрибут на етикет, отдавна е остарял. Вторият вариант се използва в много редки случаи, само защото се получава много от същия код. И третият вариант е най-често срещаният и ефективен. Тук HTML примеритагове:
- Първият начин за писане е чрез атрибута на тага (body) във файла index.htm. Написано е в следната форма: (body background= "Folder_name/Image_name.extension")(/body). Тоест, ако имаме картина, наречена „Картина“ и JPG разширениеи наименувахме папката „Изображения“, тогава записът в HTML кода ще изглежда така: (body background="Images/Picture.jpg")… (/body).
- Вторият метод на запис засяга CSS стила, но е записан в същия файл, наречен index.htm. (body style="background: url("../Images/Picture.jpg")").
- И третият метод на запис се прави в два файла. В документ, наречен index.htm, е написан следният ред: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). И във стиловия файл, наречен style.css, вече пишем: body (background: url(Images/Picture.jpg")).
Обсъдихме как да създадем фоново изображение в HTML. Сега трябва да разберете как да разтегнете изображението по ширината на целия екран.
Начини за разтягане на фоново изображение до ширината на прозореца
Нека си представим нашия екран в процентна форма. Оказва се, че цялата ширина и дължина на екрана ще бъде 100% x 100%. Трябва да разтегнем изображението до тази ширина. Нека добавим ред към записа на изображението във файла style.css, който ще разтегне изображението по цялата ширина и дължина на монитора. Как се пише това в CSS стил? Просто е!
фон: url(Images/Picture.jpg")
размер на фона: 100%; /* този запис е подходящ за повечето модерни браузъри */
Така че разбрахме как да направим картина като фон в html, за да запълни целия екран. Има и начин за запис във файла index.htm. Въпреки че този метод е остарял, е необходимо начинаещите да го познават и разбират. В тага (head)(style) div ( background-size: cover; ) (/style) (/head) този запис означава, че заделяме специален блок за фона, който ще бъде позициониран по цялата ширина на прозорец. Разгледахме 2 начина за създаване на фон на уебсайт html картинатака че изображението да се простира по цялата ширина на екрана във всеки съвременен браузър.
Как да направите фиксиран фон
Ако решите да използвате картина като фон на бъдещ уеб ресурс, тогава просто трябва да разберете как да я направите неподвижна, така че да не се разтяга по дължина и да разваля естетическия вид. Достатъчно лесно е да напишете това малко допълнение с помощ. Трябва да добавите една фраза във файла style.css след background: url(Images/Picture.jpg") fixed; или вместо това да добавите отделен ред след точка и запетая - position: fixed. Така фоновото ви изображение ще стане неподвижно. По време Превъртайки съдържанието на сайта, ще видите това текстови низовесе движат, но фонът остава на мястото си. Така че научихте как да направите фоново изображение в HTML по няколко начина.
Работа с таблица в HTML
Много неопитни уеб разработчици, когато се сблъскват с таблици и блокове, често не разбират как да направят картина като фон на таблица в HTML. Както всички CSS стилове, този език за уеб програмиране е доста прост. И решението на такъв проблем би било да се напишат няколко реда код. Трябва вече да знаете това писане редове на таблицатаи колоните са обозначени съответно като тагове (tr) и (td). За да направите фона на таблицата под формата на изображение, трябва да добавите проста фраза към тага (table), (tr) или (td), указваща връзка към изображението: фон = URL на изображението. За по-голяма яснота нека дадем няколко примера.
Таблици с картинка вместо фон: HTML примери
Нека начертаем таблица 2x3 и направим нейния фон картина, записана в папката „Images“: (table background = „Images/Picture.jpg“) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/таблица). По този начин нашата маса ще бъде боядисана на фона на картината.
Сега нека начертаем същата плоча с размери 2x3, но вмъкнете картина в колони с номера 1, 4, 5 и 6. (таблица)(tr)(td фон = “Images/Picture.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”) 5( /td) (td фон = “Images/Picture.jpg”)6(/td) (/tr) (/таблица). След преглед виждаме, че фонът се появява само в тези клетки, в които сме се регистрирали, а не в цялата таблица.
Кросбраузърна съвместимост на сайта
Има и такова нещо като съвместимост между различни браузъри на уеб ресурс. Това означава, че страниците на сайта ще се показват еднакво правилно в различни видовеи версии на браузъра. В този случай трябва да коригирате HTML кода и CSS стила към необходимите браузъри. Освен това в съвременната ера на разработване на смартфони много уеб разработчици се опитват да създадат уебсайтове, адаптирани за мобилни версиии под изглед от компютър.
Цветът на фона е достатъчен важен елементвсяка уеб страница. Първо, задава желаното настроение и общото настроение на сайта, и второ, улеснява възприемането на текста.
Цветът на фона на уеб страницата се задава с помощта на атрибута bgcolor на тага
.Пример 1: Промяна на цвета на фона
Цветът може да бъде зададен като шестнадесетична стойност или чрез името си.
Въпреки факта, че можете да посочите произволен цвят за фона, повечето сайтове използват бял фони черни букви, като най-утвърден вариант.
Фоново изображение
Можете да използвате всяко подходящо изображение като фон. Фонът не трябва да отвлича вниманието от текста, а трябва да се слива добре с него цветова схемауеб страници и да са малки по размер, за да се зареждат бързо. Ако след всичко по-горе все още искате да добавите фоново изображение към страницата, трябва да използвате атрибута background на тага
.Пример 2: Добавяне фонова картина
Ако изображението по-малък размерекрана на монитора, той ще се възпроизвежда хоризонтално и вертикално.
Тъй като тапетът се зарежда по-бавно от Цвят на фона, може да се окаже, че текстът няма да се чете известно време, докато се заредят снимките. Същото може да се случи, ако снимките са деактивирани в браузъра. Поради това се препоръчва винаги да задавате цвета на фона заедно с фоновото изображение (пример 3).
Пример 3: Използване на фоново изображение и фонов цвят
Фиксиран фон
По подразбиране, когато използвате лентата за превъртане, фоновото изображение се движи със съдържанието на уеб страницата. Internet Explorerви позволява да направите фона неподвижен, като използвате атрибута на етикета bgproperties ="fixed".
.Пример 4: Задаване на фиксиран фон
Като посочите атрибута bgproperties, както е показано в пример 4, фоновото изображение на уеб страницата ще остане неподвижно, но текстът, графиките и други елементи ще се движат с лентата за превъртане.
При създаването на всеки уеб сайт, освен функционалността, дизайнът е много важен. Именно това определя собствения стил и дизайн на конкретна фирма или лице, за което се създава уебсайта. Персонализирането на цвета на фона и изображението е лесно, като следвате инструкциите в тази статия.
Отвори твоята HTML файлс помощта на бележник или друг текстов редактор, с които сте свикнали. Например, нека вземем примитивна страница на уебсайт с минимум текст. Можете да отворите файла си с всеки браузър.
Въведете в етикета параметър bgcolor=”*****”, където ***** е цветният код. Можете да намерите цветовете за HTML във всеки графичен редакторкато изберете опцията „за уеб“ или на уебсайта https://colorscheme.ru/color-names
- style=”background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”
Моля, имайте предвид, че потребителите с по-висока резолюцияекран, вашето изображение ще бъде дублирано надолу и вдясно. Няма да изглежда добре, ако картината не е монохромна. Има специални команди за коригиране на този параметър.
- background-repeat : „Стойност“. Опциите за вашата стойност могат да бъдат: „repeat-x“ – повтаря вашето фоново изображение както хоризонтално, така и вертикално. “repeat-y” – повторение само вертикално. “no-repeat” – изображението е замразено на място и не се повтаря. “интервал” – ще се запълни цялата страница максимален бройкопия на изображението, най-външните ще бъдат изрязани. „кръг“ – същата опция, но краищата на изображението ще бъдат внимателно мащабирани;
- background-attachment: „Стойност“. Ако замените етикета „превъртане“ вместо думата Стойност, изображението ще се превърта заедно със сайта. “фиксиран” – фонът остава непроменен при скролиране;
- размер на фона: Стойност Стойност2. Тук стойностите трябва да приемат стойност в пиксели. Например: 100px 200px. В допълнение към пикселите се приемат процентни стойности. Това е опция за запълване на страницата с изображение. В допълнение към числата можете да въведете два параметъра: “contain” – запълва страницата с изображение по дългата страна и “cover” – запълва страницата с изображение по ширината.
След като научите основите на попълването на страница с фон в HTML, вие сте готови да създадете първия си уебсайт.
Съвременните браузъри ви позволяват да добавяте към елемент произволно числофонови изображения, изброяващи параметрите на всеки фон, разделени със запетаи. Достатъчно е да използвате свойството универсален фон и първо да посочите един фон за него и втори, разделени със запетая.
Как да разтегнете фона до цялата ширина на прозореца?
За да мащабирате фона, използвайте свойството background-size; задайте стойността му на 100%, тогава фонът ще заема цялата ширина на прозореца на браузъра. За по-стари версии на браузъри трябва да използвате конкретни свойства с префикси, както е показано в пример 1.
Как да добавите фоново изображение към уеб страница?
За да добавите фоново изображение към уеб страница, задайте пътя до изображението в рамките на url стойността на свойството за стил на фона, което от своя страна се добавя към селектора на тялото.
Възможно ли е да се направи анимиран фон?
Анимацията е доста мощна техника, която може да вдъхне живот на всеки документ, така че не е изненадващо, че технологията Flash, която добавя карикатури към уеб страниците, при това интерактивни, стана изключително популярна. Графичен формат GIF също поддържа проста анимациячрез последователна смяна на рамки. Така че с помощта на изображение в този формат е възможно не само да се анимира индивидуални снимки, но също и фона на уеб страница или конкретен елемент.
Първо трябва да създадете анимирана картина в GIF форматза какво можете да го използвате? Adobe програма Photoshop или друг подходящ за тази цел. Има и библиотеки от готови анимирани файлове, които могат да се използват като фоново изображение. След това изображението се добавя като фон с помощта на свойството стил на фона, както е показано в Пример 1.
Как да поставите фоново изображение в долния десен ъгъл на страницата?
За да контролирате позицията на фоновото изображение на страницата, се използва свойството за стил на фонова позиция, което едновременно задава хоризонталните и вертикалните координати на изображението. За да отмените повтарянето на фоново изображение, използвайте свойството background-position със стойност no-repeat.
Как мога да предотвратя повторението на фона?
По подразбиране фоновото изображение се повтаря хоризонтално и вертикално, образувайки мозайка в цялото поле на уеб страницата. Това поведение на фона обаче не винаги е необходимо, особено когато се поставя едно изображение, така че добавянето на стойност без повторение към свойството за стил на фона ще помогне.
Как мога да накарам фона да се повтаря само вертикално?
Повтарянето на фона обикновено се изисква за създаване на декоративни линии или градиенти, които са свързани с височината на елемент или прозорец на уеб страница. В такива случаи повтарянето на фона вертикално осигурява последователна картина, независимо от размера на елементите. Само в началото трябва да се уверите, че фоновото изображение се повтаря без шевове.
В този урок ще научите как да промените фона и цвета на текста на всеки елемент на HTML страница. Като цяло, в HTML езикНякои тагове имат специални атрибути, които променят цвета си, например bgcolor (цвят на фона). Но, първо, тези атрибути са остарели (мисля, че се сещате какво означава това), и второ, както вече казах, не всички тагове ги имат. И така, да приемем, че искате да промените цвета на фона на параграф от текст. И как ще направите това, защото етикетът
Няма ли такъв атрибут? Затова, както и в предишните уроци, ще използваме стилове (CSS), тоест универсалният стилов атрибут, който ще ни позволи да променим цвета, където пожелаем.
Как можете да посочите цвят?
Цветовете в HTML (и CSS) могат да бъдат зададени по няколко начина, ще ви покажа най-популярните и често срещани:
- Име на цвета- HTML има голям списък и за да посочите цвят е достатъчно да изпишете името му на английски, например: red, green, blue.
- HEX цветен код- Абсолютно всеки цвят може да се получи чрез смесване на три основни цвята в различни пропорции - червен, зелен и син. HEX кодът е три двойки шестнадесетични стойностиотговорен за броя на тези цветове във всеки цвят. Цветният код трябва да бъде предшестван от решетка (#), например: #FF8C00, #CC3300 и т.н.
Преди това в HTML се препоръчваше да се използва само , който гарантирано се показва еднакво във всички браузъри и на всички монитори. Но днес няма нужда да се ограничавате до него, тъй като и браузърите, и мониторите отдавна са се научили да показват правилно много по-голям списък от цветове. Но не ви препоръчвам да указвате цветовете по име; факт е, че много браузъри все още свързват различни цветове с едно и също име. Затова в този урок винаги ще използвам HEX цветови кодове.
Как да променя цвета на текста?
За да промените цвета на текста във всеки елемент от HTML страница, трябва да посочите атрибута style вътре в тага. Общ синтаксисследващия:
<тег style= "цвят: име на цвят" >... - посочване на цвета на текста по име.
<тег style= "color:#HEX код" >... - определяне на цвета на текста чрез код.
И както обикновено, за да промените цвета на текста на цялата страница, просто посочете атрибута style в тага
. И ако трябва да промените цвета на шрифта за част от текста, оградете го в таг и приложете атрибута към него.Пример за промяна на цвета на текста
Червен текст на заглавието
Текст в син абзац.
Зелен курсив. Червен текст.
Резултат в браузъра
Как да променя цвета на фона?
Цветът на фона на всеки елемент на страницата може също да бъде променен с помощта на атрибута style. Общият синтаксис е:
<тег стил= "фон: име на цвят">... - посочване на цвета на фона по име.
<тег style= "background:#HEX код" >... - задаване на цвета на фона чрез код.
Пример за промяна на цвета на фона
Заглавие.
Параграф.
Миниатюра. Обикновен текст.
Резултат в браузъра
Заглавие.
Параграф.
Миниатюра.Обикновен текст.
Когато промените цвета на фона на елементите, става много ясно колко широк всъщност заема всеки от тях. Както виждаш, блокови елементитагове, като параграфи и заглавия, обикновено заемат цялата налична ширина, дори ако съдържат много малко текст, но вградените тагове са толкова широки, колкото и тяхното съдържание. Между другото, последният параграф в примера също заема цялата ширина, просто фонът му е прозрачен, така че фонът на страницата се вижда през него. По принцип фонът на всички елементи на страницата, в които не е изрично посочен, е прозрачен, това е всичко.
Домашна работа.
- Създайте заглавие за статията и нейните два раздела. Напишете по един параграф в началото на статията и всеки раздел.
- Задайте размера на шрифта Courier на 16px за цялата страница, 22px за заглавието на статията и 19px за подзаглавията.
- Нека заглавието на статията има цвят на текста #0000CC, а подзаглавията имат цвят на текста #CC3366.
- Маркирайте Цвят на фона#66CC33 две думи във втория параграф. И в третия параграф, в същия цвят, но с една подчертана дума.
- Не забравяйте, че можете да групирате стойностите на атрибутите на стила, като поставите точка и запетая (;) между тях.