Фон css рисунка. CSS фон

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

Описание

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

Забележка

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

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

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

JavaScript

[обект] .style .backgroundImage = "[стойност]";

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

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

Стойностите

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

Няма Показва фоново изображение. url ( ) Посочва URI низ на изображението вътре в "url (...)".

background-image: url (myImage.png);

URL адрес (" ") Определя URI низ от изображение в" url (...) ", а URI низът се обозначава с" "" знаци DOUBLE QUOTE.

background-image: url ("myImage.png");

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

Начална стойност:"Нито един".

Пример за използване

Списък на кодовете

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

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

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

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

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

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

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

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

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

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

без повторение- деактивирайте повторението
повторение-x- повторение на шаблона само хоризонтално
повтори-y- повторение на шаблона само вертикално

Например:

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

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

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

Заглавие

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

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

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

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

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

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

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

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

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

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

CSS версии

Стойностите

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

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 не поддържа стойността за наследяване.

Ако фонът е зададен за ред на таблица (таг ), след това Chrome, Safari, iOS не го показват, както е предписано от спецификацията, а именно за всяка клетка поотделно. Като има предвид, че браузърът трябва да показва плътен фон за целия ред. Пример 2 показва кода за демонстриране на грешката.

HTML5 CSS2.1 IE Cr Op Sa Fx

Предистория за TR

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

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

Ориз. 2. Фон за целия ред

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

CSS версии

Стойностите

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

document.getElementById ("elementID") .style.backgroundImage

Браузъри

Internet Explorer до и включително версия 7.0 не поддържа стойността за наследяване.

HTML5 CSS2.1 IE Cr Op Sa Fx

Предистория за TR

Ориз. 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 „слоя“, преместваме всяко изображение в неговия ъгъл и това е всичко, проблемът е решен

Body (background-image: url ("image1"), url ("image2"), url ("image3"))

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

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

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