Гнездење: како да се направи слика за позадина на HTML

Многу почетниците веб-дизајнери, само за да истражувам во суштината на создавање на веб-сајтови, често се прашувам како да се направи HTML позадина на сликата. И ако некои од нив може да се справи со овој проблем, тоа е уште еден проблем за време на која се протега по целата широчина на сликата на мониторот. Во исто време, јас би сакал да видам на сајтот се прикажани идентично на сите пребарувачи, така што треба да ги исполни барањата на крос-пребарувачот. Можете да го поставите позадина на два начина: со користење на HTML тагови и CSS стилови. Секој за себе избира најдобра опција. Се разбира, CSS стил е многу удобен, бидејќи неговиот код се чуваат во посебна обвивка и не заземаат дополнителни звучници во таговите на главната страница, но прво нека се разгледа едноставна метода за инсталирање на сликата на позадината на сајтот.

Основни HTML тагови за да се создаде основа

Значи, одиме на прашањето за тоа како да се направи на сликата во позадина во HTML на екранот. Со цел да изгледа убаво сајт, мора да се разбере една прилично важен детал: тоа е доволно само да се направи градиент позадина или да го сликам во една боја, но ако треба да ја вметнете сликата во позадина, тоа не ќе се протега по целата ширина на мониторот. Сликата беше првично да ги собереш или да направите свој дизајн со оваа екстензија, во која ќе се прикаже страница на сајт. Само кога позадината на сликата е подготвена, повлечете го во папка со име «Слики». Во него, ние ќе ги чува сите употребени слики, анимации и други графички датотеки. Оваа папка треба да се наоѓа во root директориумот со сите ваши HTML датотеки. Сега можете да се движи и на кодот. Постојат неколку опции за пишување код, со која позадина ќе се промени сликата.

1. Напиши таг атрибут.
2. Преку CSS стил во HTML код.
3. Напиши CSS стилови во посебна датотека.

Како и во HTML да се направи слика позадина, може да одлучи, но јас би сакал да кажам неколку зборови за тоа како тоа ќе биде најоптимално. Првиот метод е со пишување преку атрибут таг одамна е застарена. Втората опција се користи многу ретко, бидејќи излегува дека многу од истиот код. Трета опција е најчестата и ефективна. Еве примери на HTML тагови:

1. метод на првиот албум преку таг атрибут (телото) во index.htm датотека. Тоа се чуваат во оваа форма: (позадината тело = "Папка / Nazvanie_kartinki.rasshirenie") (/ тело). Тоа е, ако имаме слика со наслов "Слика" и продолжување JPG, и папката ние име «Слики», тогаш влезот на HTML-кодот ќе изгледа вака: (тело позадина = "images / Picture.jpg") ... (/ тело) .
2. Вториот метод вклучува снимање на CSS стил, но тоа е напишано во иста датотека со index.htm името. (Тело style = "позадина: URL (" ../ Слики / Picture.jpg) ").
3. Третиот метод на снимање е направена во две датотеки. Во документот, со ознака за името index.htm (глава) е напишана како линија: (глава) (rel = Вид на линкот "интерфејс" = "text / css" href = "http: // сајт / статија / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ глава). Датотека наречена style.css стил веќе пишува: тело {позадина: URL (Слики / Picture.jpg ")}.

Како и во HTML да се направи на сликата во позадина, ние се разбираме. Сега треба да дознаам како да се водат на сликата по должината на целиот екран.

Начини да се водат на сликата во позадина на ширината на прозорецот

Ние ги претставуваме нашите екранот во форма на процент. Излегува дека целата ширина и должина на екранот ќе биде 100% × 100%. Ние треба да се водат на сликата на оваа ширина. Додади во сликата снимање style.css линија што ќе се протега на сликата во текот на целата ширина и должина на мониторот. Како што е напишано во CSS стил? Тоа е едноставно!

тело

{

позадина: URL (Слики / Picture.jpg)

позадина-големина: 100%; / * Овој пост е погоден за повеќето современи прелистувачи * /

}

Значи ние сфатиле како да се направи слика во позадина во HTML на екранот. Исто така постои и начин на запишување во датотеката index.htm. Иако овој метод и застарени, но за почетници тоа е неопходно да се знае и да се разбереме. div таг (глава) (стил) {background-големина: покритие; } (/ Стил) (/ глава), овој рекорд значи дека ние се доделат специјална единица за позадина, кои ќе бидат поставени во текот на целата ширина на прозорецот. Имаме смета на два начина, како да се направи HTML сајт слика во позадина, така што сликата е растегната на целата ширина на екранот во која било од современи прелистувачи.

Како да се направи фиксен позадина

Ако одлучите да го користите слика како позадина на иднината веб ресурси, тогаш само треба да знаете како да се направи тоа фиксни, така што тоа не е се протегала во должина и не ја расипам естетскиот изглед. Едноставно со користење на HTML код за да се регистрирате мал прилог. Вие треба да поднесе style.css да додадете фраза по позадина: URL (Слики / Picture.jpg) фиксна; или наместо да се додаде по запирка посебна линија - позиција: фиксен. Така, вашата позадина ќе бидат поправени. Во текот на лизгање содржината на сајтот, ќе видите дека текстот линии се движи, но на позадината останува во место. Значи сте научиле како да се направи HTML сликата во позадина, на неколку начини.

Работа со табели во HTML

Многу неискусни веб програмери, кои се соочуваат со маси и блокови, често не се разбере како да се направи HTML сликата во позадина маса. Како и сите тимови HTML и CSS стилови, јазикот на веб програмирање е прилично едноставна. И решение за овој проблем е да се напише еден пар на линии на код. Веќе треба да знаат дека со пишување на табела на редови и колони, односно, како што е наведено од страна на тагови (tr) и (td). Да се направи на позадината на маса во форма на сликата, тоа е потребно да се додаде со таг (маса), (tr) или (td) едноставна фраза во врска со референца сликата: позадина = URL слики. За да биде појасно, ние им даде неколку примери.

Табела со слика наместо на потекло: HTML примери

Нацртајте табела 2x3 и позадината на сликата зачувани во папката "Слики" направи: (табела позадина = "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-фон = "images / Picture.jpg") 4 (/ td) (td-фон = "images / Picture.jpg") 5 ( / td) (td позадина = "images / Picture.jpg") 6 (/ td) (/ tr) (/ табела). По гледањето можеме да видиме дека во позадина се појавува само во оние клетки во кој се регистрирани, а не на целата маса.

сајт крос-пребарувачот компатибилност

Не постои такво нешто како крос-пребарувачот компатибилност веб ресурс. Ова значи дека вашиот сајт е подеднакво добро прикажани во различни видови и верзии на интернет прелистувачи. Тоа треба да биде HTML кодот и CSS стилови за да изберете потребно прелистувачи. Покрај тоа, во модерната ера на паметни телефони, многу веб програмери се обидуваат да се создаде веб-сајтови и адаптирани за мобилната верзија и компјутер изглед.