Кольори і оформлення фону
Властивості CSS дозволяють авторам управляти квітами переднього плану і фоном елемента. Оформлення фону може здійснюватися з використанням кольорової палітри або графічних об'єктів. З використанням властивостей фону розробники можуть розміщувати, дублювати фонове зображення, а також визначати, чи буде воно фіксоване щодо вікна перегляду або буде переміщатися разом з документом в процесі його прокрутки.
Це властивість описує колір переднього плану текстового вмісту елемента. Наприклад, існує кілька способів завдання червоного кольору:
Приклад (и):
EM {color: red} / * стандартну назву кольору * / EM {color: rgb (255,0,0)} / * значення системи RGB з діапазону 0-255 * /В якості фону елемента (наприклад, поверхні, на якій він буде відображений) розробники можуть задавати або колір, або зображення. В термінах моделі представлення документа у вигляді блоків поняття "фон" відноситься до фону областей, відведених для вмісту і відступів . Стиль і колір меж при цьому встановлюються за допомогою властивостей кордонів . Поля завжди прозорі, так що крізь них завжди видно фон батьківського блоку.
Властивості фону не успадковуються, але фон батьківського блоку завжди буде видно, тому що за замовчуванням в якості початкового значення властивості 'Background-color' виступає значення 'transparent'.
Фон блоку, що породжується кореневих елементом, покриває всю область уявлення .
Розробникам HTML-документів рекомендується ставити фон для елементу BODY, а не для елемента HTML. Агенти користувачів при оформленні фону повинні дотримуватися наступної ієрархії пріоритетів: якщо значення властивості 'Background' елемента HTML відмінно від 'transparent', то слід використовувати його. В іншому випадку слід використовувати значення властивості 'Background' елемента BODY. Якщо в результаті вийде значення 'transparent', то відображається фон виявиться невизначеним.
Відповідно до цих правил область уявлення, що лежить в основі наступного HTML-документа, буде мати "мармуровий" фон:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN"> <HTML> <HEAD> <TITLE> Установка фону області уявлення </ TITLE> <STYLE type = "text / css"> BODY {background : url ( "http://style.com/marble.png")} </ STYLE> </ HEAD> <BODY> <P> Я використовую мармуровий фон. </ BODY> </ HTML>14.2.1 Властивості фону : 'background-color' , 'background-image' , 'background-repeat' , 'background-attachment' , 'background-position' і 'background'
Це властивість встановлює колір фону елемента рівним <Колір> або ключовим словом 'transparent', завдяки якому всі кольори, що лежать під елементом, стають помітними.
Приклад (и):
H1 {background-color: # F00}Це властивість задає графічний об'єкт в якості фону елемента. При визначенні фонового зображення авторам слід також вказати колір фону, який буде використовуватися, якщо зображення недоступне. Якщо зображення є, то воно відображається поверх фонового кольору (який буде видно тільки крізь прозорі фрагменти зображення).
Як значення цієї властивості може виступати <Uri> графічного об'єкта або значення 'none', якщо зображення не використовується.
Приклад (и):
BODY {background-image: url ( "marble.gif")} P {background-image: none}Якщо задано фонове зображення, то ця властивість визначає, чи буде воно дублюватися (у вигляді мозаїки) і яким чином це буде здійснюватися. Мозаїка покриває області, відведені в блоці для вмісту і відступів . Значення даного властивості мають наступний сенс:
repeat Зображення дублюється в вертикальній і горизонтальній площинах. repeat-x Зображення дублюється тільки в горизонтальній площині. repeat-y Зображення дублюється тільки у вертикальній площині. no-repeat Зображення не дубльований: відображається лише одна копія зображення.Приклад (и):
BODY {background: white url ( "pendant.gif"); background-repeat: repeat-y; background-position: center; }
[D]
Одна копія фонового зображення розташована по центру, а інші копії розташовуються зверху вниз, формуючи тим самим вертикальну смугу позаду елемента.
Якщо задано фонове зображення, то ця властивість визначає, чи буде воно фіксуватися щодо вікна перегляду (Значення 'fixed') або буде переміщатися разом з документом (значення 'scroll') в процесі його прокрутки.
Навіть в разі фіксації зображення воно залишається видимим тільки тоді, коли знаходиться в області, призначеної для оформлення фону або відступів елемента. Тому зображення може залишатися невидимим доти, поки його копії не будуть розташовані мозаїкою ( 'background-repeat: repeat').
Приклад (и):
У наступному прикладі формується нескінченна вертикальна смуга, яка залишається "приклеєною" до вікна перегляду під час прокрутки елемента.
BODY {background: red url ( "pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; }Агенти користувачів можуть інтерпретувати значення 'fixed' як 'scroll'. Однак рекомендується, щоб значення 'fixed' все ж інтерпретувалася коректно, по крайней мере, для елементів HTML і BODY, тому що у авторів не існує можливості надання зображення тільки для тих браузерів, які підтримують значення 'fixed'. Додаткову інформацію можна отримати в розділі, присвяченому конформности .
Якщо задано фонове зображення, то ця властивість визначає його початкове положення. Значення мають наступний сенс:
<відсотки> <відсотки> Якщо використовується пара значень '0% 0%', то верхній лівий кут зображення вирівнюється щодо верхнього лівого кута крайової лінії відступів блоку. Якщо задана пара значень '100% 100%', то нижній правий кут зображення поміщається в нижній правий кут крайової лінії відступів. Якщо задана пара значень '14% 84% ', то точка, зміщена уздовж зображення на 14% вправо по горизонталі і на 84% вниз по вертикалі поміщається в точку, зміщену уздовж області, призначеної для відступів, на 14% вправо по горизонталі і на 84% вниз по вертикалі. <довжина> <довжина> Якщо задана пара '2cm 2cm', то верхній лівий кут зображення поміщається на 2 см правіше і 2 см нижче верхнього лівого кута області, призначеної для відступів. top left і left top Аналогічно значенням '0% 0%'. top, top center і center top Аналогічно значенням '50% 0% '. right top і top right Аналогічно значенням '100% 0%'. left, left center і center left Аналогічно значенням '0% 50%'. center і center center Аналогічно значенням '50% 50% '. right, right center і center right Аналогічно значенням '100% 50%'. bottom left і left bottom Аналогічно значенням '0% 100%'. bottom, bottom center і center bottom Аналогічно значенням '50% 100% '. bottom right і right bottom Аналогічно значенням '100% 100%'.Якщо задано тільки одне значення довжини або одне процентне співвідношення, то воно визначає позицію тільки по горизонталі, а позиція по вертикалі визначається, виходячи із значення 50%. Якщо задано два значення, то першою вказується позиція по горизонталі. Допускається поєднання значень довжини і процентних співвідношень (наприклад, '50% 2cm '). Також допускається використання негативних значень. Ключові слова не можуть використовуватися разом зі значеннями довжини або процентними співвідношеннями (всі можливі варіанти представлені вище).
Приклад (и):
BODY {background: url ( "banner.jpeg") right top} / * 100% 0% * / BODY {background: url ( "banner.jpeg") top center} / * 50% 0% * / BODY {background: url ( "banner.jpeg") center} / * 50% 50% * / BODY {background: url ( "banner.jpeg") bottom} / * 50% 100% * /Щоб друкувати водяний знак фіксоване у вікні перегляду (див. Властивість 'Background-attachment' ), То воно розміщується щодо вікна перегляду, а не щодо області елемента, призначеної для відступів. наприклад,
Приклад (и):
BODY {background-image: url ( "logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; }У представленому вище прикладі зображення (одиночне) поміщається в нижньому правому куті вікна перегляду.
властивість 'Background' є властивістю стенографічного типу, використовуваним для визначення окремих властивостей фону ( 'Background-color' , 'Background-image' , 'Background-repeat' , 'Background-attachment' і 'Background-position' ) Одночасно.
спочатку властивість 'Background' встановлює всім окремим властивостям фону їх початкові значення, а потім явно призначає їм ті значення, які були задані в оголошенні.
Приклад (и):
У першому правилі наступного прикладу було задано значення тільки для властивості 'Background-color' , В той час як всім іншим властивостям були присвоєні їх початкові значення. У другому правилі явно задані значення всіх окремих властивостей.
BODY {background: red} P {background: url ( "chess.png") gray 50% repeat fixed}Інформацію про кольорову гаму можна знайти в підручнику під назвою "Gamma Tutorial" в специфікації PNG ( [PNG10] ).
При обчисленні гамма-корекції агенти користувачів, які здійснюють відображення на дисплеях з ЕПТ, можуть припускати ідеальність використовуваної ЕПТ і ігнорувати всі ефекти, які мають місце в поточній колірній гамі через внесені в неї збурень. Тому на наявних в даний момент платформах мінімум, що їм слід зробити:
ПК з системою MS-Windows нічого не потрібно Unix з використанням X11 нічого не потрібно Mac з використанням QuickDraw застосувати колірну гамму 1.45 [ICC32] (Додатки, які здійснюють автономну синхронізацію кольорів, можуть просто передати профіль sRGB ICC в модуль синхронізації квітів для виконання коректної настройки колірної гами) SGI з використанням X застосувати колірну гамму з /etc/config/system.glGammaVal (за замовчуванням використовується значення 1.70; додатки, що працюють на Irix версії 6.2 і вище, можуть просто передати профіль sRGB ICC в систему управління колірною гамою) NeXT з NeXTStep застосувати колірну гамму 2.22Фраза "застосувати колірну гамму" означає, що кожній з трьох складових R, G і B перед тим, як вона буде передана операційній системі, має бути присвоєно значення R '= Rgamma, G' = Ggamma, B '= Bgamma.
Це можна швидко зробити, здійснивши одноразове побудова 256-елементної таблиці пошуку в момент ініціалізації браузера:
for i: = 0 to 255 do raw: = i / 255.0; corr: = pow (raw, gamma); table [i]: = trunc (0.5 + corr * 255.0) endЦе дозволить скоротити кількість абстрактних математичних розрахунків, що припадають на один атрибут кольору, і ще більше скоротити їх при обчисленні одного пікселя.
Спонсори:
Хостинг: