Колір і властивості фону

Ці властивості описують колір (часто званий колір переднього плану ) і фон елемента (тобто поверхня, на яку вміст додається). Можна задати колір фону і / або фонове зображення. Положення зображення, якщо /, як вона повторюється, і чи є вона фіксованою або прокручується щодо полотна може бути також встановлений.

«Колір» майно успадковується в звичайному режимі. Властивості фону не успадковуються, але фон батьківського елемента буде просвічувати за замовчуванням через початкового "прозорими" значення "колір фону".

5.3.1 'колір'

Значення: <color> Початковий: UA конкретного застосування: всі елементи Спадкування: та Відсоток значення: N / A
Це властивість описує колір тексту елемента (часто згадується як переднього плану кольору). Існують різні способи завдання червоним:

EM {колір: червоний} / * природна мова * /

EM {кольору: RGB (255,0,0)} / * RGB діапазоні 0-255 * /

'колір фону'

Значення: <color> | прозорі Початковий: прозора Застосовується: всі елементи Спадкування: немає Процентні значення: N / A
Це властивість встановлює колір фону елемента.

H1 {фонового кольору: # F00}

"фонового зображення"

Значення: <url> | жодного Початкове значення: жоден Область застосування: всі елементи Спадкування: немає Процентні значення: N /A
Це властивість встановлює фонове зображення елементу. При завданні фонового зображення, необхідно також встановити колір фону, який буде використовуватися, коли зображення недоступне. Коли зображення доступно, воно накладається поверх фону.

BODY {фонового зображення: URL (marble.gif)}

P {фонового зображення: немає}

"фон-повторити"

Значення: повторити | повторювати-х | повторювати-у | не повторювати Початковий: повторити Область застосування: всі елементи Спадкування: немає Процентні значення: N / A
Якщо фонове зображення задано, то значення 'фон-повторити "визначає, як / якщо зображення повторюється.Значення 'повторювати' означає, що зображення повторюється по горизонталі і по вертикалі. "Повторювати-х '(' повторювати-у ') значення роблять зображення повторюватися горизонтально (вертикально), щоб створити одну смугу зображення з одного боку на інший. При значенні «не повторювати», зображення не повторюється.

BODY {

фон: червоний URL (pendant.gif);

фон-повторити: повторювати-у;

}

У наведеному вище прикладі, зображення буде повторюватися тільки по вертикалі.

"фонових прихильності '

Значення: прокрутка | фіксовані Початковий: прокрутка Застосовується: всі елементи Спадкування: немає Процентні значення: N / A
Якщо фонове зображення задано, то значення 'тлі прихильності "визначає, чи буде це зафіксовано у зв'язку з полотна або якщо вона прокручується разом з вмістом.

BODY {

фон: червоний URL (pendant.gif);

фон-повторити: повторювати-у;

тлі прихильності: фіксований;

}

"фон-позиція"

Значення: [<percentage> | <length>] {1,2} | [наверх | центру | вниз] | | [ліворуч | по центру | вправо] Початкове значення: 0% 0% Застосовується: до елементам рівня блоку і заміщаються елементам Спадкування: немає Процентні значення: см. Розмір самого елемента
Якщо фонове зображення було зазначено, значення 'фон-позиції' визначає вихідне положення.

З пара значень '0% 0% ', верхній лівий кут зображення додається у верхньому лівому кутку вікна, яка оточує вміст елемента (тобто не поле, яке оточує заповнення, рамки або маржі ). Пара значень '100% 100% 'поміщає нижній правий кут зображення в нижній правий кут елемента. При значенні пара '14% 84% ', точка зображення 14% поперек і 84% вниз зображення буде розміщений в точці 14% поперек і 84% вниз елемента.

Можна також використовувати ключові значення, щоб вказати положення фонового зображення. Ключові слова не можуть бути об'єднані з процентних значень або значень довжини. Можливих комбінацій ключових слів та їх інтерпретації є наступні:

· "Верхній лівий" і "лівий верхній" і те ж, що '0% 0% '.

· «Зверху», «вгорі по центру" і "центр верхньої" означають те ж саме, '50% 0% '.

· 'Правий верхній »і« правий верхній "означають те ж саме, '100% 0%'.

· «Лівий», «лівий центр» і «в центрі ліворуч" означає те ж саме як '0% 50% '.

· «Центру» і «центр центру" означають те ж саме, '50% 50% '.

· "Право", "правий центр" та "Центр права" означають те саме, '100% 50% '.

· "Внизу зліва" і "зліва внизу" означають те ж саме, '0% 100% '.

· 'Знизу', 'внизу по центру "і" центр дна »означає те ж саме, '50% 100%'.

· "Правий нижній" і "правий нижній" означають те ж саме, '100% 100% '.

Приклади :

BODY {фон: URL (banner.jpeg) правом верхньому} / * 100% 0% * /

BODY {фон: URL (banner.jpeg) вгорі по центру} / * 50% 0% * /

BODY {фон: URL (banner.jpeg) центром} / * 50% 50% * /

BODY {фон: URL (banner.jpeg) нижньої} / * 50% 100% * /

Якщо фонове зображення фіксовано у зв'язку з полотна (див. властивість 'тлі прихильності' вище), зображення розміщується щодо полотна, а не елемент. Наприклад:

BODY {

фонового зображення: URL (logo.png);

тлі прихильності: фіксований;

фон-позиції: 100% 100%;

}

У наведеному вище прикладі, зображення поміщається в правому нижньому кутку полотна.

"фонових"

Значення: <background-color> | | <background-image> | | <background-repeat> | | <background-attachment> | | <background-position> Початковий: не визначено для скорочених властивостей Застосовується: всі елементи Спадкування: немаєВідсоток значень: допускається за <background-position>Властивість 'фон' є скороченим властивістю для встановлення індивідуальних властивостей фону (тобто 'колір фону', 'фонове зображення »,« фон-повторити "," фон-додаток "й" фон-позиції') в ж самому місці в таблиці стилів.Можливі значення на "фонових" властивості множини всіх можливих значень за окремими властивостями.

BODY {фон: червоний}

P {фон: URL (chess.png) сірий 50% повторювати фіксованого}

"Фонових" властивість завжди встановлює всі індивідуальні властивості фону. У перше правило вище, наприклад, тільки для 'колір фону' був даний і інші індивідуальні властивості встановлені у свої початкові значення. У другій правило, всі індивідуальні властивості, які були вказані.