Background url css как да въведете цялото изображение. CSS фон. Пълно ръководство. Как да направите фона си по-привлекателен

И тук стигаме до основното нещо, нека перифразираме това: „Сайтът започва с фона.“ Повечето блогъри правят „класически блогове“ с бял фон, но ние ще тръгнем по различен път. Минете покрай чудесен имот CSS фоново изображение, не можем.

Какво прави? Този имот CSS фоново изображениевмъква изображение като фон в различни елементи HTML- страници. Не се ограничава само до етикета тяло, и се използва широко в дизайна на уебсайтове, например за: div, li, p, таблица, горен колонтитул, долен колонтитул.

Да разгледаме един пример:







Дизайнът на уебсайта започва с фона.




Би било правилно да посочите цвят за свойство на фона цвят на фона, като предпазна мрежа, ако изображението не се зареди. В скоби url()посочете пътя до папката със снимки.

По подразбиране изображението ще се повтаря като „плочка“, докато не запълни целия екран на браузъра; докато се движим надолу по страницата, нашата „плочка“ ще запълни както втория екран, така и третия, докато съдържанието на страницата свърши . Ясно е, че такъв резултат не е върхът на дизайнерската мисъл и няма да имаме „баня“, а просто блог, където четливостта е много важен момент.

Една лесна опция да се отървете от „плочкообразността“ е да използвате голямо изображение с ширина поне 1024 px, така че да запълва целия екран. Ще бъде също добро решениенамерете безшевна текстура, когато се умножи, шаблонът ще изглежда като едно цяло.

Как да направите фона по-привлекателен?

Слава Богу, имаме помощници за това:

  • не-повтаряне– забранете повторението
  • повторение-x– повтаряне на модела само хоризонтално
  • повторение-у– повтаряне на модела само вертикално

Например:







Заглавка на блога


Това е фонова текстура, която се повтаря само хоризонтално.



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







Заглавие


Пример за неповтарящ се фон със зададено позициониране.


Картината се показва само веднъж и се намира вдясно.


Отстъпът от десния край е зададен на 200 px, за да се избегне сблъсък на текста с фона.



Ако искаме изображението винаги да се вижда, когато екранът се превърта надолу, трябва да добавим свойство към кода по-горе - фоново прикачване: фиксирано;

Каква е разликата между imgИ фоново изображение?

Разликата е фундаментална, етикет imgпоставени директно в тялото HTML-страница и отговаря за съдържанието (илюстрации, снимки, аватари), носи семантичен товар. Много е важно изображението да е индексирано търсачкии влезе резултати от търсенето. Свойства CSS фоново изображение– направете сайта уникален и красив, тоест това е дизайн, на който трябва да се обърне внимание външен файл CSSстилове или използване вътре в елемент стил.

Разбира се, това не означава това фоново изображениеняма да работи, ако се постави в тялото HTML- страници. Но силно препоръчвам да се вземе предвид всичко, свързано с дизайна CSS. В резултат на това ще получим чист HTML-код:

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

Е, разгледахме горе-долу всички варианти за използване на имота CSS фоново изображение. Още практика приятели! Чувствайте се свободни да копирате кода и да измислите свои собствени варианти!

Кратка информация

CSS версии

Ценности

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

none Деактивира фоновото изображение за елемента.

inherit Наследява стойността на родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Обектен модел

document.getElementById("elementID ").style.backgroundImageБраузъри

Internet Explorer

до версия 7.0 включително, прилага фона към вътрешната страна на границата на елемент, който има зададено свойство hasLayout. Ако елементът няма hasLayout, свойството background-image ще зачита границите на елемента, както е посочено в спецификацията. Разликата в дисплея ще бъде забележима, ако границите са прекъснати или пунктирани, а не плътни.

Ако елементът е настроен на превъртане или автоматично, Internet Explorer 8 ще има вертикално забавяне от един пиксел, когато фонът се превърта. Версиите на Internet Explorer до и включително 7.0 не поддържат наследената стойност.

none Деактивира фоновото изображение за елемента.

Ако фонът е зададен за ред от таблица (таг

123

), тогава Chrome, Safari, iOS го показват не както е предписано от спецификацията, а именно за всяка клетка поотделно. Докато браузърът трябва да показва плътен фон за целия ред. Пример 2 показва код, демонстриращ грешката. Фон за TRРезултат този пример V Браузър Chrome Explorer, Opera и Firefox правилно показват фона на линията (фиг. 2).

ориз. 1. Повторете фона за всяка клетка

ориз. 2. Фон за цялата линия

Кратка информация

CSS версии

Ценности

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

none Деактивира фоновото изображение за елемента.

inherit Наследява стойността на родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Обектен модел

Версии на Internet Explorer до и включително 7.0 прилагат фон към вътрешната граница на елемент, който има зададено свойство hasLayout. Ако елементът няма hasLayout, свойството background-image ще зачита границите на елемента, както е посочено в спецификацията. Разликата в дисплея ще бъде забележима, ако границите са прекъснати или пунктирани, а не плътни.

Internet Explorer

до версия 7.0 включително, прилага фона към вътрешната страна на границата на елемент, който има зададено свойство hasLayout. Ако елементът няма hasLayout, свойството background-image ще зачита границите на елемента, както е посочено в спецификацията. Разликата в дисплея ще бъде забележима, ако границите са прекъснати или пунктирани, а не плътни.

Ако елементът е настроен на превъртане или автоматично, Internet Explorer 8 ще има вертикално забавяне от един пиксел, когато фонът се превърта. Версиите на Internet Explorer до и включително 7.0 не поддържат наследената стойност.

none Деактивира фоновото изображение за елемента.

Ако фонът е зададен за ред от таблица (таг

123

Резултатът от този пример в браузъра Chrome е показан на фиг. 1. Браузърите Internet Explorer, Opera и Firefox правилно показват фона на линията (фиг. 2).

ориз. 1. Повторете фона за всяка клетка

ориз. 2. Фон за цялата линия

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

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

цвят на фона

Повече от сигурен съм, че вече сте задавали цвета на фона повече от веднъж. Това може да стане с помощта на няколко вида нотация: обикновена (използва се името на цвета), шестнадесетична или RGB нотация. Всеки тип е еквивалентен, използвайте който ви харесва най-добре. Опитвам се да използвам най-краткия вариант и за по-лесно възприемане полученият стилов файл е малко по-малък по размер.

P (цвят-фон: червен;) p (цвят-фон: #f00;) p (цвят-фон: #ff0000;) p (цвят-фон: rgb(255, 0, 0;))

CSS3 поддържа прозрачност, така че можем да го добавим към нашия цвят, например така:

P (цвят на фона: rgba(255, 0, 0, 0,5);)

Последната цифра задава прозрачността на 50%. Можете да зададете стойността на прозрачност от 0 (пълно прозрачен фон) до 1 (напълно непрозрачен).

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

Това свойство също се използва много често; то ви позволява да присвоите изображение на фона. CSS3 добави възможност за присвояване на множество изображения към фона, като всяко създава свой собствен слой, така че всяко следващо да припокрива предишното. Защо това може да е полезно? Всичко е съвсем просто - да речем, че трябва да завиете малки украшения във всеки ъгъл на сайта. Като се има предвид повече или по-малко гумено оформление, използването на едно изображение не е опция. Затова правим 4 „слоя“, преместваме всяко изображение в неговия собствен ъгъл и това е всичко, проблемът е решен

Основен текст (фоново изображение: url("image1"), url("image2"), url("image3"))

Ако трябва да присвоите едно изображение на фона, оставяме само първото в кода, мисля, че това е разбираемо.
Когато използвате всякакви изображения като фон, трябва да запомните две правила:

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

Поддръжката за множество фонови изображения е доста широка. Всички браузъри, дори IE8, поддържат това свойство.

фоново изображение: | нито един; фоново изображение: | няма | наследявам; фоново изображение: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | няма

Описание

свойство фоново изображение(от английското “background image” ‒ “фоново изображение”) задава фоновото изображение на елемента.

Забележка

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

Условия за ползване

От CSS3 (разделени със запетая) можете да посочите няколко фонови изображения наведнъж. В същото време долната фонови изображенияще се вижда през прозрачните области на горните фонови изображения.

JavaScript

[object].style.backgroundImage="[стойност]";

Поддръжка на браузър

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

Ценности

Всички стойности CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

Няма Показва, че няма фоново изображение. url(

) Указва URI низа на изображението вътре в „url(...)“.

фоново изображение: url(myImage.png); Url("

") Указва URI низа на изображението вътре в " url(...) ". URI низът е разделен със знаци " " " ДВОЙНИ КАВИЧИ.

фоново изображение: url("myImage.png ");

Наследяване Указва, че елементът трябва да наследи настройките на своя родителски елемент.: Първоначална стойност

Пример за употреба

Изброяване на кодове

свойство фоново изображение

Фоново изображение

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





> свойство фоново изображение>