Background

The solution!

Therefore, I can happily offer an alternative for you: RGBa colors. The beauty in this is that you declare the normal RGB values + values for the level of transparency you want, resulting in a very easy way to declare transparency for a color. Making this happen with CSS, with a fallback for those web browsers that doesn’t support it, would look like this:

	.alpha60 {
		/* Fallback for web browsers that doesn't support RGBa */
		background: rgb(0, 0, 0);
		/* RGBa with 0.6 opacity */
		background: rgba(0, 0, 0, 0.6);
	}

The transparency will only be applied to the background – fantastic, isn’t it?!

A little caveat

Shockingly enough (erm), no version of Internet Explorer supports RGBa colors (i.e. not IE 6, IE 7 or IE 8 at the time of this writing). However, and lucky for us, in year 2000 Microsoft went crazy with implementing various filters in IE. One of them are the gradient filter, and what we can do is use that and just define the same start and end color. “Ok, but how do I get the transparency”, you might be thinking now. The answer to that is that you will declare that as part of the color hex value. A CSS gradient filter achieving the same effect as the CSS code above would look like this:

	.alpha60 {
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	}

As you can see, it is actually declared as part of an 8-digit hex value, where the first two numbers is the alpha hex value, the next two is Red, and so on. The difference between how we do it with RGBa is that the hex value will range from 0 to 255, just as any color value. So, how do we convert an alpha level of to its hex value?

This where a little Math comes in the picture. Basically, we take our desired alpha level, , and multiplies it with 255 – then we convert that result into hex. One very easy way to do this is make use of Google’s Search Features, and just search google for 0.6 * 255 in hex. Unfortunately, though, Google’s calculator seems to only handle integers, hence 0.3 * 255 in hex won’t give you a result.

An alternative, or quicker way altogether, is to use the beauty of JavaScript. Just open up Firebug and type this into the console:

	// Replace 0.6 with your desired alpha level
	Math.floor(0.6 * 255).toString(16);

99 is then corresponding to 0.6, and becomes the first two digits of the start and end colors for the gradient filter.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values.
The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB,
you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The
alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства border-image-repeat</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 70px; /* устанавливаем ширину блока */
margin-right : 10px; /* устанавливаем величину отступа от правого края элемента */
padding : 30px; /* устанавливаем величину внутреннего отступа элемента */
border : 10px solid transparent; /* устанавливаем сплошную прозрачную границу размером 10 пикселей */
border-image-source : url(img-border.png); /* устанавливаем путь к изображению, которое будет использовано в качестве границы */
border-image-width : 30px; /* устанавливаем ширину границы-изображения для всех сторон */
border-image-slice : 30; /* указываем смещение для всех сторон */
}
.test   {border-image-repeat : stretch;}  /* изображение растягивает на всю область (это значение по умолчанию) */
.test2   {border-image-repeat : repeat;}  /* изображение повторяется, чтобы заполнить всю область (пока не заполнит зазор между двумя границами). Если изображение не помещается после повторения на целое число раз, то изображение будет обрезано. */
.test3   {border-image-repeat : round;}  /* изображение должно повторяться, пока не заполнит зазор между двумя границами. Если изображение не помещается после повторения на целое число раз, то изображение будет масштабировано, чтобы соответствовать. */
.test4   {border-image-repeat : space;}  /* изображение повторяется, чтобы заполнить всю область. Если изображение не помещается после повторения на целое число раз, дополнительное пустое пространство распределяется между всеми повторами (плитками). */
</style>
</head>
	<body>
		<p><b>Первоначальное изображение:</b></p>
		<img src = "img-border.png" alt = "ramka"><br>
		<div class = "test">stretch</div>
		<div class = "test2">repeat</div>
		<div class = "test3">round</div>
		<div class = "test4">space</div>
	</body>
</html>

В этом примере с помощью свойства border-image-repeat мы рассмотрели как изображение-граница можеты быть повторена, масштабируема или растянута.

С использованием свойства border-image-source мы задали путь к изображению, которое использовали в качестве границы, свойством border-image-slice задали смещение внутрь от верхней, правой, нижней и левой кромки изображения, свойством border-image-width установили ширину границы-изображения для всех сторон.

Результ нашего примера:

Пример использования свойства border-image-repeat.CSS свойства

HSL Colors

HSL stands for Hue, Saturation and Lightness.

An HSL color value is specified with: hsl(hue, saturation, lightness).

1. Hue is a degree on the color wheel (from 0 to 360):
   • 0 (or 360) is red
   • 120 is green
   • 240 is blue
2. Saturation is a percentage value: 100% is the full color.
3. Lightness is also a percentage; 0% is dark (black) and 100% is white.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

The following example defines different HSL colors:

Example

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */#p3 {background-color: hsl(120, 100%, 25%);}  /* dark
green */#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values.
The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB,
you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The
alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

HSL значение

В HTML цвет можно задать с помощью оттенка, насыщенности и легкости (HSL) в форме:

HSL (оттенок, насыщенность, легкость)

Hue-это степень на цветном колесе от 0 до 360. 0-красный, 120-зеленый, 240-синий.

Насыщенность представляет собой процентное значение, 0% означает оттенок серого, а 100%-полный цвет.

Легкость также процент, 0% черный, 50% не является ни светлым, ни темным, 100% белый

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Насыщенность

Насыщенность может быть охарактеризована как интенсивность цвета.

100% является чистым цветом, не оттенки серого

50% является 50% серый, но вы все еще можете увидеть цвет.

0% полностью серый, вы больше не можете видеть цвет.

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Легкость

Легкость цвета можно описать как сколько света вы хотите дать цвет, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни свет) 100% означает полную легкость (белый).

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Оттенки серого часто определяются установкой оттенка и насыщенности в 0, и отрегулируйте легкость от 0% до 100%, чтобы получить более темные/светлые оттенки:

Тег html изменения цвета заднего фона текста через атрибут style background-color

Html атрибут style background-color может применяться в любых html тегах, связанных с версткой текста: абзацах <p>; цитатах <blockquote>; таблицах <table> и их составляющих <tr> и <td>.

Изменение цвета заднего фона текста абзаца <p>

В открытый тег абзаца <p> будем вставлять атрибут style background-color и html код самого цвета заднего фона, который нам нужен #00FFFF (я выбрал Aqua). Для этого заходим на сайт ColorScheme.Ru и копируем код необходимого цвета:

Теперь собираем атрибут изменения цвета заднего фона текста и вставляем в открытый тег абзаца:

<p style=»background-color: #00FFFF»> (кавычки должны быть именно такого вида — » «, иначе цвет не поменяется)

Верстаем сам абзац:

<p style=»background-color: #00FFFF»> В другой вкладке браузера открываем любую из своих социальных сетей, например Facebook. Выбираем видео, которое хотим скачать себе на компьютер, включив его воспроизведение. В строке браузера копируем правой кнопкой мыши ссылку на это видео.</p>

Смотрим как будет выглядеть на блоге:

В другой вкладке браузера открываем любую из своих социальных сетей, например Facebook. Выбираем видео, которое хотим скачать себе на компьютер, включив его воспроизведение. В строке браузера копируем правой кнопкой мыши ссылку на это видео.

Изменение цвета заднего фона текста цитаты <blockquote>

Верстаем цитату с изменением цвета заднего фона:

<blockquote style=»background-color: #BDB76B»>Чтобы снизить риск мошенничества со стороны работодателей и иметь возможность найти официальную удалённую работу, с 2013 года в Российской Федерации учтено правовое регулирование такой работы.
По ТК РФ, удалённая работа официально называется дистанционной и трудовой договор о дистанционной работе можно теперь заключать, подписывая своей электронной подписью.</blockquote>

На сайте цитата будет выглядеть:

Изменение цвета заднего фона текста таблицы <table>

Верстаем таблицу с изменением цвета заднего фона текста всей таблицы:

<table style=»background-color: #FFD700″><tr><td>ячейка 1</td>

<td>ячейка 2</td>

<td>ячейка 3</td></tr>

<tr><td>ячейка 4</td>

<td>ячейка 5</td>

<td>ячейка 6</td></tr>

<tr><td>ячейка 7</td>

<td>ячейка 8</td>

<td>ячейка 9</td></tr></table>

На блоге получаем таблицу в таком виде:

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6
ячейка 7	ячейка 8	ячейка 9

Теперь изменим цвет заднего фона текста построчно:

<table><tr style=»background-color: #00FFFF»><td>ячейка 1</td>

<td>ячейка 2</td>

<td>ячейка 3</td></tr>

<tr style=»background-color #FFA500″><td>ячейка 4</td>

<td>ячейка 5</td>

<td>ячейка 6</td></tr>

<tr style=»background-color: #FFDAB9″><td>ячейка 7</td>

<td>ячейка 8</td>

<td>ячейка 9</td></tr></table>

И на сайте увидим такую таблицу:

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6
ячейка 7	ячейка 8	ячейка 9

В каждой ячейке таблицы, также можно изменить цвет заднего фона текста:

<table><tr><td style=»background-color: #00FFFF»>ячейка 1</td>

<td style=»background-color: #FFA500″>ячейка 2</td>

<td style=»background-color: #FFDAB9″>ячейка 3</td></tr></table>

На блоге увидим в таком варианте:

ячейка 1

ячейка 2

ячейка 3

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

Применяйте на своих сайтах атрибут style background-color для изменения цвета заднего фона текста в своих публикациях, там, где это действительно необходимо.

Успехов вам и до новых встреч!

Цвет фона CSS

Не знаете как изменить цвет фона в html? Чтобы указать html цвет фона страницы сайта, используйте свойство  background-color CSS. Оно используется так же, как и свойство color, другими словами, можно ввести название цвета, его шестнадцатеричное значение или RGB.

Чтобы указать цвета для фона веб-страницы, необходимо работать с html-тегом

<body>

Рассмотрите приведенный ниже код CSS:

/ * Мы работаем с тегом body, и соответственно со ВСЕЙ страницей * /
body
{
background-color: black; /* Фон страницы будет черным */
color: white; /* Текст страницы будет белым */
}

Результат работы этого кода простой html страницы с фоном:

Белый текст на черном фоне

Set Background Color Opacity Using Alpha Channel Color Notations

We can use the following CSS3 alpha channel color functional notations to set the background color to a lower opacity:

Using the RGBA (Red-Green-Blue-Alpha) Model:

Syntax:

background-color: rgba(red, green, blue, alpha);

Where the values of each color in RGB can be an integer between 0-255 or a percentage value from 0-100%, and the value of Alpha can be a number between 0-1.

Examples:

rgba(0, 0, 255, 0)      /* transparent */
rgba(0, 0, 255, 0.5)    /* 50% opaque blue */
rgba(0, 0, 255, 1)      /* fully opaque blue */

Syntax:

background-color: hsla(hue, saturation, lightness, alpha);

Where the possible values of the HSLA color notation are:

• Hue: specified in degrees (imagine a color wheel) where:
  • 0° – red
  • 60° – yellow
  • 120° – green
  • 180° – turquoise
  • 240° – blue
  • 300° – pink
  • 360° – red
• Saturation: specified in percentage where 0% is completely desaturated (or gray) and 100% is fully saturated (or full color).
• Lightness: specified in percentage where 0% is completely dark (or black) and 100% is completely light (or white).
• Alpha: a number between 0-1 where 0 is fully transparent and 1 is fully opaque.

Examples:

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* 50% opaque blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

PNG в качестве фона

В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.

Рис. 1. Изображение для создания фона

После чего добавляем рисунок в качестве фона через свойство background, как показано в примере 1.

Пример 1. Использование полупрозрачного рисунка

XHTML 1.0CSS 2.1IECrOpSaFx

Результат данного примера показан на рис. 3.

Рис. 2. Применение фонового рисунка

Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.

Приведенный метод имеет ряд ограничений. Так, при отключении картинок в браузере, фон исчезнет вообще. К тому же не так легко изменить цвет фона и значение прозрачности, для этого придется опять редактировать изображение.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Универсальное свойство background

Мы с Вами рассмотрели все свойства, которые предназначены для работы с фоновыми изображениями. В большинстве случаев вводить длинные названия рассмотренных выше свойств непродуктивно, но это не значит, что мы зря потратили на это время — без понимания как они работают по отдельности, вы не сможете грамотно их применять в одном объявлении.

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

• background-color (color | transparent).
• background-image (url | none).
• background-position (значение).
• background-size (auto | length | cover | contain).
• background-repeat (repeat | repeat-x |repeat-y | no-repeat).
• background-origin (padding-box | border-box | content-box).
• background-clip (border-box | padding-box | content-box).
• background-attachment (scroll | fixed | local).

Давайте рассмотрим пример использования универсального свойства background:

Пример использования универсального свойства background

И так, что мы сделали в этом примере:

• Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
• Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
• Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

Обращаю Ваше внимание на то, что установка нескольких фоновых изображений в качестве заднего фона для одного элемента выполнена для демонстрации возможностей CSS. В большинстве случаев проще установить один задний фон для одного элемента, а уже этот элемент настроить и позиционировать в документе как вам необходимо

Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».

Свойство background-origin

Свойство background-origin определяет, в какой области под рамкой элемента будет позиционироваться фоновое изображение

Обратите внимание: нельзя применять background-origin, если значение background-attachment задано как fixed

Варианты значений свойства background-origin:

Значения свойства background-origin

CSS

background-origin: padding-box | border-box | content-box

1	background-originpadding-box|border-box|content-box

В каком-то смысле это свойство напоминает для элемента (значения похожи), но с точки зрения фона. Оно определяет, будет ли фоновый рисунок занимать пространство внутри элемента вместе с его внутренними отступами (padding-box), или с внутренними отступами и рамками (border-box), или только область контента без отступов и рамок (content-box).

Посмотрим на варианты отображения фоновой картинки при изменении значений свойства background-origin. Для того чтобы увидеть, изменяется ли что-то при  background-attachment: fixed отметьте флажком соответствующий checkbox.

Свойство background-size определяет размер фонового изображения

Для установки размера фонового изображения используется свойство . Оно может принимать как два, так и одно значение. Первое значение указывается для ширины, второе для высоты. Если указано только одно значение, то второе значение (высота) принимает значение . Синтаксис:

Код CSS

Значения могут задаваться в любых разрешенных в CSS единицах, процентах и ключевыми словами:

1. – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, ширина или высота равнялась размерам блока;
2. – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, и изображение полностью поместилось в блок;
3. – например, если первое значение равно 200px, а второе auto, то высота изображения будет вычисляться автоматически с сохранением пропорций.

Рассмотрим пример:

Код CSS