Главная » Языки программирования

Background color numbers html

На чтение 5 мин
Содержание
  1. HTML Colors
  2. Color Names
  3. Background Color
  4. Example
  5. Hello World Lorem ipsum. Text Color You can set the color of text: Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Example Hello World Lorem ipsum. Ut wisi enim. Border Color You can set the color of borders: Hello World Hello World Hello World Example Hello World Hello World Hello World Color Values In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. The following three elements have their background color set with RGB, HEX, and HSL values: The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency): Источник CSS свойство background-color CSS свойство background-color устанавливает цвет фона элемента. Фон элемента совпадает с общим размером элемента, включая отступ и границу (без внешнего отступа). Для установления цвета фона необходимо выбрать какой-либо цвет. Вы можете выбрать цвет из нашего инструмента Color Picker. Цвет может быть обозначен следующими способами: название цвета-«red» HEX значение -«#ff0000» и RGB значение-«rgb(255,0,0)». Необходимо убедиться, что контрастность цвета фона и цвета текста, расположенного не нем, достаточна высока, чтобы люди с плохим зрением смогли прочесть контент страницы. Значение по умолчанию transparent Применяется Ко всем элементам, а также к ::first-letter и ::first-line. Наследуется Нет Анимируемое Да. Цвет фона анимируем. Версия CSS1 DOM синтаксис object.style.backgroundColor = «#FFFFFF»; Синтаксис background-color: color | transparent | initial | inherit; Пример html> html> head> style> body < background-color: #8ebc42; > style> head> body> h2>Пример свойства background-color h2> p>Здесь установлено свойство background-color со значением hex. p> body> html> Можно установить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства background-color . Узнать больше о HTML Colors. Рассмотрим пример со значением transparent: Пример html> html> head> style> body < background-color: transparent; > style> head> body> h2>Пример свойства background-color h2> p>В данном примере установлено значение transparent для background-color. Является значением по умолчанию. p> body> html> В следующем примере можно увидеть анимируемую версию: Пример html> html> head> style> body < background-color: #eee; animation: mymove 5s infinite; > @keyframes mymove < 30% background-color: #1c87c9;> > style> head> body> h2> Анимация свойства background-color h2> p>В данном примере постепенно меняется цвет фона с серого в синий и снова в серый. p> body> html> Значения Значение Описание transparent Это значение по умолчанию. Устанавливает transparent для цвета фона. Это означает, что нет фонового цвета. color Устанавливает цвет фона. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). initial Устанавливает свойство в значение по умолчанию. inherit Значение элемента наследуется от родительского элемента. Поддержка браузера Источник background-color The background-color CSS property sets the background color of an element. Try it Syntax /* Keyword values */ background-color : red; background-color : indigo; /* Hexadecimal value */ background-color : #bbff00; /* Fully opaque */ background-color : #bf0; /* Fully opaque shorthand */ background-color : #11ffee00; /* Fully transparent */ background-color : #1fe0; /* Fully transparent shorthand */ background-color : #11ffeeff; /* Fully opaque */ background-color : #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color : rgb ( 255 255 128) ; /* Fully opaque */ background-color : rgb ( 117 190 218 / 0.5) ; /* 50% transparent */ /* HSL value */ background-color : hsl ( 50 33% 25%) ; /* Fully opaque */ background-color : hsl ( 50 33% 25% / 0.75) ; /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color : currentcolor; background-color : transparent; /* Global values */ background-color : inherit; background-color : initial; background-color : revert; background-color : revert-layer; background-color : unset; The background-color property is specified as a single value. Values The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image. Accessibility concerns It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger. Formal definition Formal syntax Examples HTML div class = " exampleone" > Lorem ipsum dolor sit amet, consectetuerdiv > div class = " exampletwo" > Lorem ipsum dolor sit amet, consectetuerdiv > div class = " examplethree" > Lorem ipsum dolor sit amet, consectetuerdiv > CSS .exampleone background-color : transparent; > .exampletwo background-color : rgb ( 153, 102, 153) ; color : rgb ( 255, 255, 204) ; > .examplethree background-color : #777799; color : #ffffff; > Result Specifications Browser compatibility BCD tables only load in the browser See also Found a content problem with this page? This page was last modified on Jul 18, 2023 by MDN contributors. Your blueprint for a better internet. MDN Support Our communities Developers Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation. Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license. Источник
  6. Text Color
  7. Hello World
  8. Example
  9. Hello World Lorem ipsum. Ut wisi enim. Border Color You can set the color of borders: Hello World Hello World Hello World Example Hello World Hello World Hello World Color Values In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. The following three elements have their background color set with RGB, HEX, and HSL values: The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency): Источник CSS свойство background-color CSS свойство background-color устанавливает цвет фона элемента. Фон элемента совпадает с общим размером элемента, включая отступ и границу (без внешнего отступа). Для установления цвета фона необходимо выбрать какой-либо цвет. Вы можете выбрать цвет из нашего инструмента Color Picker. Цвет может быть обозначен следующими способами: название цвета-«red» HEX значение -«#ff0000» и RGB значение-«rgb(255,0,0)». Необходимо убедиться, что контрастность цвета фона и цвета текста, расположенного не нем, достаточна высока, чтобы люди с плохим зрением смогли прочесть контент страницы. Значение по умолчанию transparent Применяется Ко всем элементам, а также к ::first-letter и ::first-line. Наследуется Нет Анимируемое Да. Цвет фона анимируем. Версия CSS1 DOM синтаксис object.style.backgroundColor = «#FFFFFF»; Синтаксис background-color: color | transparent | initial | inherit; Пример html> html> head> style> body < background-color: #8ebc42; > style> head> body> h2>Пример свойства background-color h2> p>Здесь установлено свойство background-color со значением hex. p> body> html> Можно установить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства background-color . Узнать больше о HTML Colors. Рассмотрим пример со значением transparent: Пример html> html> head> style> body < background-color: transparent; > style> head> body> h2>Пример свойства background-color h2> p>В данном примере установлено значение transparent для background-color. Является значением по умолчанию. p> body> html> В следующем примере можно увидеть анимируемую версию: Пример html> html> head> style> body < background-color: #eee; animation: mymove 5s infinite; > @keyframes mymove < 30% background-color: #1c87c9;> > style> head> body> h2> Анимация свойства background-color h2> p>В данном примере постепенно меняется цвет фона с серого в синий и снова в серый. p> body> html> Значения Значение Описание transparent Это значение по умолчанию. Устанавливает transparent для цвета фона. Это означает, что нет фонового цвета. color Устанавливает цвет фона. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). initial Устанавливает свойство в значение по умолчанию. inherit Значение элемента наследуется от родительского элемента. Поддержка браузера Источник background-color The background-color CSS property sets the background color of an element. Try it Syntax /* Keyword values */ background-color : red; background-color : indigo; /* Hexadecimal value */ background-color : #bbff00; /* Fully opaque */ background-color : #bf0; /* Fully opaque shorthand */ background-color : #11ffee00; /* Fully transparent */ background-color : #1fe0; /* Fully transparent shorthand */ background-color : #11ffeeff; /* Fully opaque */ background-color : #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color : rgb ( 255 255 128) ; /* Fully opaque */ background-color : rgb ( 117 190 218 / 0.5) ; /* 50% transparent */ /* HSL value */ background-color : hsl ( 50 33% 25%) ; /* Fully opaque */ background-color : hsl ( 50 33% 25% / 0.75) ; /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color : currentcolor; background-color : transparent; /* Global values */ background-color : inherit; background-color : initial; background-color : revert; background-color : revert-layer; background-color : unset; The background-color property is specified as a single value. Values The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image. Accessibility concerns It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger. Formal definition Formal syntax Examples HTML div class = " exampleone" > Lorem ipsum dolor sit amet, consectetuerdiv > div class = " exampletwo" > Lorem ipsum dolor sit amet, consectetuerdiv > div class = " examplethree" > Lorem ipsum dolor sit amet, consectetuerdiv > CSS .exampleone background-color : transparent; > .exampletwo background-color : rgb ( 153, 102, 153) ; color : rgb ( 255, 255, 204) ; > .examplethree background-color : #777799; color : #ffffff; > Result Specifications Browser compatibility BCD tables only load in the browser See also Found a content problem with this page? This page was last modified on Jul 18, 2023 by MDN contributors. Your blueprint for a better internet. MDN Support Our communities Developers Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation. Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license. Источник
  10. Border Color
  11. Hello World
  12. Hello World
  13. Hello World
  14. Example
  15. Hello World Hello World Hello World Color Values In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. The following three elements have their background color set with RGB, HEX, and HSL values: The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency): Источник CSS свойство background-color CSS свойство background-color устанавливает цвет фона элемента. Фон элемента совпадает с общим размером элемента, включая отступ и границу (без внешнего отступа). Для установления цвета фона необходимо выбрать какой-либо цвет. Вы можете выбрать цвет из нашего инструмента Color Picker. Цвет может быть обозначен следующими способами: название цвета-«red» HEX значение -«#ff0000» и RGB значение-«rgb(255,0,0)». Необходимо убедиться, что контрастность цвета фона и цвета текста, расположенного не нем, достаточна высока, чтобы люди с плохим зрением смогли прочесть контент страницы. Значение по умолчанию transparent Применяется Ко всем элементам, а также к ::first-letter и ::first-line. Наследуется Нет Анимируемое Да. Цвет фона анимируем. Версия CSS1 DOM синтаксис object.style.backgroundColor = «#FFFFFF»; Синтаксис background-color: color | transparent | initial | inherit; Пример html> html> head> style> body < background-color: #8ebc42; > style> head> body> h2>Пример свойства background-color h2> p>Здесь установлено свойство background-color со значением hex. p> body> html> Можно установить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства background-color . Узнать больше о HTML Colors. Рассмотрим пример со значением transparent: Пример html> html> head> style> body < background-color: transparent; > style> head> body> h2>Пример свойства background-color h2> p>В данном примере установлено значение transparent для background-color. Является значением по умолчанию. p> body> html> В следующем примере можно увидеть анимируемую версию: Пример html> html> head> style> body < background-color: #eee; animation: mymove 5s infinite; > @keyframes mymove < 30% background-color: #1c87c9;> > style> head> body> h2> Анимация свойства background-color h2> p>В данном примере постепенно меняется цвет фона с серого в синий и снова в серый. p> body> html> Значения Значение Описание transparent Это значение по умолчанию. Устанавливает transparent для цвета фона. Это означает, что нет фонового цвета. color Устанавливает цвет фона. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). initial Устанавливает свойство в значение по умолчанию. inherit Значение элемента наследуется от родительского элемента. Поддержка браузера Источник background-color The background-color CSS property sets the background color of an element. Try it Syntax /* Keyword values */ background-color : red; background-color : indigo; /* Hexadecimal value */ background-color : #bbff00; /* Fully opaque */ background-color : #bf0; /* Fully opaque shorthand */ background-color : #11ffee00; /* Fully transparent */ background-color : #1fe0; /* Fully transparent shorthand */ background-color : #11ffeeff; /* Fully opaque */ background-color : #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color : rgb ( 255 255 128) ; /* Fully opaque */ background-color : rgb ( 117 190 218 / 0.5) ; /* 50% transparent */ /* HSL value */ background-color : hsl ( 50 33% 25%) ; /* Fully opaque */ background-color : hsl ( 50 33% 25% / 0.75) ; /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color : currentcolor; background-color : transparent; /* Global values */ background-color : inherit; background-color : initial; background-color : revert; background-color : revert-layer; background-color : unset; The background-color property is specified as a single value. Values The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image. Accessibility concerns It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger. Formal definition Formal syntax Examples HTML div class = " exampleone" > Lorem ipsum dolor sit amet, consectetuerdiv > div class = " exampletwo" > Lorem ipsum dolor sit amet, consectetuerdiv > div class = " examplethree" > Lorem ipsum dolor sit amet, consectetuerdiv > CSS .exampleone background-color : transparent; > .exampletwo background-color : rgb ( 153, 102, 153) ; color : rgb ( 255, 255, 204) ; > .examplethree background-color : #777799; color : #ffffff; > Result Specifications Browser compatibility BCD tables only load in the browser See also Found a content problem with this page? This page was last modified on Jul 18, 2023 by MDN contributors. Your blueprint for a better internet. MDN Support Our communities Developers Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation. Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license. Источник
  16. Hello World Hello World Color Values In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. The following three elements have their background color set with RGB, HEX, and HSL values: The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency): Источник CSS свойство background-color CSS свойство background-color устанавливает цвет фона элемента. Фон элемента совпадает с общим размером элемента, включая отступ и границу (без внешнего отступа). Для установления цвета фона необходимо выбрать какой-либо цвет. Вы можете выбрать цвет из нашего инструмента Color Picker. Цвет может быть обозначен следующими способами: название цвета-«red» HEX значение -«#ff0000» и RGB значение-«rgb(255,0,0)». Необходимо убедиться, что контрастность цвета фона и цвета текста, расположенного не нем, достаточна высока, чтобы люди с плохим зрением смогли прочесть контент страницы. Значение по умолчанию transparent Применяется Ко всем элементам, а также к ::first-letter и ::first-line. Наследуется Нет Анимируемое Да. Цвет фона анимируем. Версия CSS1 DOM синтаксис object.style.backgroundColor = «#FFFFFF»; Синтаксис background-color: color | transparent | initial | inherit; Пример html> html> head> style> body < background-color: #8ebc42; > style> head> body> h2>Пример свойства background-color h2> p>Здесь установлено свойство background-color со значением hex. p> body> html> Можно установить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства background-color . Узнать больше о HTML Colors. Рассмотрим пример со значением transparent: Пример html> html> head> style> body < background-color: transparent; > style> head> body> h2>Пример свойства background-color h2> p>В данном примере установлено значение transparent для background-color. Является значением по умолчанию. p> body> html> В следующем примере можно увидеть анимируемую версию: Пример html> html> head> style> body < background-color: #eee; animation: mymove 5s infinite; > @keyframes mymove < 30% background-color: #1c87c9;> > style> head> body> h2> Анимация свойства background-color h2> p>В данном примере постепенно меняется цвет фона с серого в синий и снова в серый. p> body> html> Значения Значение Описание transparent Это значение по умолчанию. Устанавливает transparent для цвета фона. Это означает, что нет фонового цвета. color Устанавливает цвет фона. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). initial Устанавливает свойство в значение по умолчанию. inherit Значение элемента наследуется от родительского элемента. Поддержка браузера Источник background-color The background-color CSS property sets the background color of an element. Try it Syntax /* Keyword values */ background-color : red; background-color : indigo; /* Hexadecimal value */ background-color : #bbff00; /* Fully opaque */ background-color : #bf0; /* Fully opaque shorthand */ background-color : #11ffee00; /* Fully transparent */ background-color : #1fe0; /* Fully transparent shorthand */ background-color : #11ffeeff; /* Fully opaque */ background-color : #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color : rgb ( 255 255 128) ; /* Fully opaque */ background-color : rgb ( 117 190 218 / 0.5) ; /* 50% transparent */ /* HSL value */ background-color : hsl ( 50 33% 25%) ; /* Fully opaque */ background-color : hsl ( 50 33% 25% / 0.75) ; /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color : currentcolor; background-color : transparent; /* Global values */ background-color : inherit; background-color : initial; background-color : revert; background-color : revert-layer; background-color : unset; The background-color property is specified as a single value. Values The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image. Accessibility concerns It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger. Formal definition Formal syntax Examples HTML div class = " exampleone" > Lorem ipsum dolor sit amet, consectetuerdiv > div class = " exampletwo" > Lorem ipsum dolor sit amet, consectetuerdiv > div class = " examplethree" > Lorem ipsum dolor sit amet, consectetuerdiv > CSS .exampleone background-color : transparent; > .exampletwo background-color : rgb ( 153, 102, 153) ; color : rgb ( 255, 255, 204) ; > .examplethree background-color : #777799; color : #ffffff; > Result Specifications Browser compatibility BCD tables only load in the browser See also Found a content problem with this page? This page was last modified on Jul 18, 2023 by MDN contributors. Your blueprint for a better internet. MDN Support Our communities Developers Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation. Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license. Источник
  17. Hello World Color Values In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. The following three elements have their background color set with RGB, HEX, and HSL values: The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency): Источник CSS свойство background-color CSS свойство background-color устанавливает цвет фона элемента. Фон элемента совпадает с общим размером элемента, включая отступ и границу (без внешнего отступа). Для установления цвета фона необходимо выбрать какой-либо цвет. Вы можете выбрать цвет из нашего инструмента Color Picker. Цвет может быть обозначен следующими способами: название цвета-«red» HEX значение -«#ff0000» и RGB значение-«rgb(255,0,0)». Необходимо убедиться, что контрастность цвета фона и цвета текста, расположенного не нем, достаточна высока, чтобы люди с плохим зрением смогли прочесть контент страницы. Значение по умолчанию transparent Применяется Ко всем элементам, а также к ::first-letter и ::first-line. Наследуется Нет Анимируемое Да. Цвет фона анимируем. Версия CSS1 DOM синтаксис object.style.backgroundColor = «#FFFFFF»; Синтаксис background-color: color | transparent | initial | inherit; Пример html> html> head> style> body < background-color: #8ebc42; > style> head> body> h2>Пример свойства background-color h2> p>Здесь установлено свойство background-color со значением hex. p> body> html> Можно установить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства background-color . Узнать больше о HTML Colors. Рассмотрим пример со значением transparent: Пример html> html> head> style> body < background-color: transparent; > style> head> body> h2>Пример свойства background-color h2> p>В данном примере установлено значение transparent для background-color. Является значением по умолчанию. p> body> html> В следующем примере можно увидеть анимируемую версию: Пример html> html> head> style> body < background-color: #eee; animation: mymove 5s infinite; > @keyframes mymove < 30% background-color: #1c87c9;> > style> head> body> h2> Анимация свойства background-color h2> p>В данном примере постепенно меняется цвет фона с серого в синий и снова в серый. p> body> html> Значения Значение Описание transparent Это значение по умолчанию. Устанавливает transparent для цвета фона. Это означает, что нет фонового цвета. color Устанавливает цвет фона. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla(). initial Устанавливает свойство в значение по умолчанию. inherit Значение элемента наследуется от родительского элемента. Поддержка браузера Источник background-color The background-color CSS property sets the background color of an element. Try it Syntax /* Keyword values */ background-color : red; background-color : indigo; /* Hexadecimal value */ background-color : #bbff00; /* Fully opaque */ background-color : #bf0; /* Fully opaque shorthand */ background-color : #11ffee00; /* Fully transparent */ background-color : #1fe0; /* Fully transparent shorthand */ background-color : #11ffeeff; /* Fully opaque */ background-color : #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color : rgb ( 255 255 128) ; /* Fully opaque */ background-color : rgb ( 117 190 218 / 0.5) ; /* 50% transparent */ /* HSL value */ background-color : hsl ( 50 33% 25%) ; /* Fully opaque */ background-color : hsl ( 50 33% 25% / 0.75) ; /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color : currentcolor; background-color : transparent; /* Global values */ background-color : inherit; background-color : initial; background-color : revert; background-color : revert-layer; background-color : unset; The background-color property is specified as a single value. Values The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image. Accessibility concerns It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger. Formal definition Formal syntax Examples HTML div class = " exampleone" > Lorem ipsum dolor sit amet, consectetuerdiv > div class = " exampletwo" > Lorem ipsum dolor sit amet, consectetuerdiv > div class = " examplethree" > Lorem ipsum dolor sit amet, consectetuerdiv > CSS .exampleone background-color : transparent; > .exampletwo background-color : rgb ( 153, 102, 153) ; color : rgb ( 255, 255, 204) ; > .examplethree background-color : #777799; color : #ffffff; > Result Specifications Browser compatibility BCD tables only load in the browser See also Found a content problem with this page? This page was last modified on Jul 18, 2023 by MDN contributors. Your blueprint for a better internet. MDN Support Our communities Developers Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation. Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license. Источник
  18. Color Values
  19. CSS свойство background-color
  20. Синтаксис
  21. Пример
  22. Пример
  23. Пример
  24. Значения
  25. Поддержка браузера
  26. background-color
  27. Try it
  28. Syntax
  29. Values
  30. Accessibility concerns
  31. Formal definition
  32. Formal syntax
  33. Examples
  34. HTML
  35. CSS
  36. Result
  37. Specifications
  38. Browser compatibility
  39. See also
  40. Found a content problem with this page?
  41. MDN
  42. Support
  43. Our communities
  44. Developers
Читайте также:  Connect javascript to python

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Ut wisi enim.

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

Hello World

Hello World

Hello World

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three elements have their background color set with RGB, HEX, and HSL values:

The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

Источник

CSS свойство background-color

CSS свойство background-color устанавливает цвет фона элемента. Фон элемента совпадает с общим размером элемента, включая отступ и границу (без внешнего отступа).

Для установления цвета фона необходимо выбрать какой-либо цвет. Вы можете выбрать цвет из нашего инструмента Color Picker. Цвет может быть обозначен следующими способами: название цвета-«red» HEX значение -«#ff0000» и RGB значение-«rgb(255,0,0)».

Необходимо убедиться, что контрастность цвета фона и цвета текста, расположенного не нем, достаточна высока, чтобы люди с плохим зрением смогли прочесть контент страницы.

Значение по умолчанию transparent
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Нет
Анимируемое Да. Цвет фона анимируем.
Версия CSS1
DOM синтаксис object.style.backgroundColor = «#FFFFFF»;

Синтаксис

background-color: color | transparent | initial | inherit;

Пример

html> html> head> style> body < background-color: #8ebc42; > style> head> body> h2>Пример свойства background-color h2> p>Здесь установлено свойство background-color со значением hex. p> body> html>

Можно установить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства background-color . Узнать больше о HTML Colors.

Рассмотрим пример со значением transparent:

Пример

html> html> head> style> body < background-color: transparent; > style> head> body> h2>Пример свойства background-color h2> p>В данном примере установлено значение transparent для background-color. Является значением по умолчанию. p> body> html>

В следующем примере можно увидеть анимируемую версию:

Пример

html> html> head> style> body < background-color: #eee; animation: mymove 5s infinite; > @keyframes mymove < 30% background-color: #1c87c9;> > style> head> body> h2> Анимация свойства background-color h2> p>В данном примере постепенно меняется цвет фона с серого в синий и снова в серый. p> body> html>

Значения

Значение Описание
transparent Это значение по умолчанию. Устанавливает transparent для цвета фона. Это означает, что нет фонового цвета.
color Устанавливает цвет фона. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla().
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

Источник

background-color

The background-color CSS property sets the background color of an element.

Try it

Syntax

/* Keyword values */ background-color: red; background-color: indigo; /* Hexadecimal value */ background-color: #bbff00; /* Fully opaque */ background-color: #bf0; /* Fully opaque shorthand */ background-color: #11ffee00; /* Fully transparent */ background-color: #1fe0; /* Fully transparent shorthand */ background-color: #11ffeeff; /* Fully opaque */ background-color: #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color: rgb(255 255 128); /* Fully opaque */ background-color: rgb(117 190 218 / 0.5); /* 50% transparent */ /* HSL value */ background-color: hsl(50 33% 25%); /* Fully opaque */ background-color: hsl(50 33% 25% / 0.75); /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: revert; background-color: revert-layer; background-color: unset;

The background-color property is specified as a single value.

Values

The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image.

Accessibility concerns

It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Formal definition

Formal syntax

Examples

HTML

div class="exampleone">Lorem ipsum dolor sit amet, consectetuerdiv> div class="exampletwo">Lorem ipsum dolor sit amet, consectetuerdiv> div class="examplethree">Lorem ipsum dolor sit amet, consectetuerdiv>

CSS

.exampleone  background-color: transparent; > .exampletwo  background-color: rgb(153, 102, 153); color: rgb(255, 255, 204); > .examplethree  background-color: #777799; color: #ffffff; >

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Оцените статью
© 2023 Программирование