С появата на CSS3 DTP работа в много отношения е по-лесно и по-логично: в края на краищата, сега можете да направите, за да конфигурирате гъвкаво обект, по-рядко се прибягва до JavaScript.Да речем, че се наложи да настроите прозрачността на фона - CSS веднага предлага няколко опции.
фон определя от набор от атрибути (фон-изображения, фон-позиция, фон размер, фон-повторение, фон-прикрепване, фон-произход, фон-клип, фон-цвят), всяка от които може да се предписва самостоятелно илида се обединят под едно и също атрибут фон.Нека разгледаме всеки един от тях по-подробно.
атрибут фон-цвят
В CSS, цвета на фона може да се зададе по няколко начина: като се използва шестнадесетичен код, цвят името или RGB-влизането на.В CSS3 стана възможно да се използва вместо RGB опция за запис с RGBA.
цвят шестнадесетичен код е написан на имота след решетката: фон-цвят: # FFDAB9.Ако героите в двойки съответстват на такъв запис, кодът обикновено е малко нарязани: # ccff00 може да бъде написано като # cf0:
тялото {фон-цвят: # cf0;}.
име там, дори и в най-екзотичните цветове.Например, в допълнение към бялото стандартната червения и, можете да използвате NavajoWhite (#FFDEAD) или Honeydew2 (# E0EEE0):
тялото {фон-цвят: лилаво;}.
последния вариант RGB или RGBA запис ви позволява да посочите не само цвета, но и прозрачността на фона CSS, но на път за работа в IE 9, само по-старите версии.Други браузъри разпознават нормален вариант с прозрачността.Съгласно стандартите на W3C предпочитане е да се използват едни и същи RGBA вместо по обичайния RGB.
последната стойност в RGBA определя непрозрачността на заден план и от 0 (прозрачен) до 1 (непрозрачна).
Има някои необичайни стойности.Цветът на фона може да бъде определен с помощта на HSL и HSLA.Както се прибавят в CSS3, и следователно не се поддържа от IE версия 9 или по-висока.Опциите са идентични с RGB или RGBA, просто в различен формат: Hue (оттенък - стойността върху цветното колело, се дава в градуси), насищане (насищане - наситеност на цвета като процент, от 0 до 100), Lightness (лекота - яркост, измерени по същия параметър насити).
атрибут фон изображение
най-различни браузъри версия на прозрачен фон - е използването на изображението.В CSS3, можете да посочите дори още снимки, това се прави чрез запетая.Пример:
тялото {фон изображение: URL (bg1.png), URL (bg2.png)}.
подкрепя това дори и IE8.Няколко изображения като фон се използва в оформлението на каучук.Важно е, не забравяйте да използвате всяко изображение, както е във вашия CSS цвят на фона, тъй като потребителите могат просто да качите снимка.
атрибут фон-позиция
Ако използвате изображение, което да се определят на фона блок, CSS позволява да позиционирате изображението навсякъде по екрана.По подразбиране изображението се намира в горния ляв ъгъл.Атрибутът приемам всякакви словесни посоки (горе, долу, ляво, дясно), или числов (лихви, пиксели и други единици).Необходимо е да се уточни двете стойности за хоризонтална и вертикална:
тялото {фон-позиция: дясно център;} - в този пример, на заден план ще се намира от дясната страна на страницата, с горната и долната част на разстоянието до изображението са едни и същи.
атрибут фон размер
Понякога ще трябва да използвате CSS да се простират на заден план или да се намали неговия размер.За тази цел, атрибут фон размери, и размерът може да се определи като фон пиксели или проценти, или във всяка друга единица за измерване.
С този атрибут, има някои проблеми: за правилното показване на фона на по-стари браузъри трябва да използвате префикс.Разбира се, сегашните версии изцяло в подкрепа на този атрибут и необходимостта от специфични свойства изчезват.
атрибут фон-привързаност
Този атрибут определя поведението на фоновото изображение, когато превъртате.Например, това може да отнеме 3 стойности (с изключение на наследяване, за сумата от всички атрибути в тази статия):
- фиксирана - прави картината на фона на фиксирани;
- превъртане - фоновите свитъци с останалата част от елементите;
- местно - изображението на фона се превъртат, ако превъртане е съдържание.Background, което излиза извън рамките на съдържанието е фиксиран.
Пример за употреба:
тялото {фон-привързаност фиксирана}.
момента Firefox не поддържа последната версия на имота (местно).
атрибут фон-произход
Този атрибут е отговорен за позиционирането на елемента.Браузъри ранни версии изискват използването на представки.Апартаментът е с три параметъра:
- подплата-кутията позиции от ръба на заден план, като същевременно се отчита дебелината на рамката;
- гранично-кутия свойства са различни от предишните по това, че граничната линия може да бъде напълно или частично покриване на заден план;
- изображение съдържание кутия позициониране pryavyazyvaya неговото съдържание.
Ако зададете няколко стойности, браузърът може да реагира по свой начин: Firefox и Opera приемаме само първата опция.
атрибут фон-Повтарям
Като правило, ако е посочен фоновото изображение, то трябва да се повтори, хоризонтално или вертикално.За това и използва атрибут фон-повторение.По този начин, блок фон, CSS, който съдържа такъв имот може да има една от няколко възможности:
- не-повторение - изображение на страницата се появи в един формуляр;
- повторете - модел повтаря в х и у;
- многократно х - само хоризонтално;
- многократно у - само вертикално;
- пространство - модел се повтаря, но ако пространство Не е попълнено, а след това има празнини между снимков материал;
- кръг - изображението се мащабира, ако тя не се запълни цялата площ цялата картина.
Пример за атрибут:
тялото {фон-повторение: не-повторение повторете} - подобно фон-повторение: Повтарям-у.
В CSS3 може зададени стойности за множество изображения, ако параметрите на трансфер, разделени със запетаи.
атрибут фон-клип
Този атрибут определя поведението на фона по границите (например, в случай на пунктирани рамки):
- уплътнение кутия - фон показва във вътрешността на блока;
- гранично-кутия - попада в приложното поле на изображението;
- съдържание кутия - на снимката на фона се появява само в рамките на съдържанието.
Пример за употреба:
тялото {фон-клип: съдържание кутия;}.
Chrom и Safari изисква използването на префикса -webkit-.
непрозрачност атрибут и се филтрира
непрозрачност атрибут позволява да настроите прозрачността фон - CSS имот ще работи във всички браузъри.Стойността може да се регулира от 0.0 до 1.0 включително.С това можете да настроите прозрачността на фона CSS на цяло число без стойност вместо 0.3 е достатъчно да напишете 0,3:
.block {фон изображение: URL (img.png);непрозрачност: 0,3;}.
да настроите прозрачността фон, CSS е подходящ дори и за IE-долу деветата версия, използвайте филтъра атрибут:
.block {фон изображение: URL (img.png);филтър: алфа (непрозрачност = 30);}.
В този случай, непрозрачността се намира между 0 и 100. Имайте предвид, че непрозрачността приписват различни настройки за прозрачност чрез RGBA наследствеността: непрозрачност с помощта на прозрачен фон е не само, но и на всички елементи във вътрешността на уреда.
Винаги се уверете, че статистиката за ползване сваляне от ОНД и на всички други страни.Най-големият проблем на всички DTP - старите версии на IE, те не позволяват пълноценното използване на CSS3.Ако оформлението не забравяйте да използвате специалните служби, които проверяват дали вашият браузър е собственост CSS.Ако не можете да инсталирате по-стари версии на браузъри, можете да получите услугата, която проверява дейността на обекта в различни браузъри онлайн.
