Background

All CSS Background Properties

Property	Description
background	Sets all the background properties in one declaration
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page
background-clip	Specifies the painting area of the background
background-color	Sets the background color of an element
background-image	Sets the background image for an element
background-origin	Specifies where the background image(s) is/are positioned
background-position	Sets the starting position of a background image
background-repeat	Sets how a background image will be repeated
background-size	Specifies the size of the background image(s)

❮ Previous
Next ❯

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Свойство background-image для установки фонового изображения

Свойство используется для установки фонового изображения. Позволительно устанавливать несколько изображений фона, перечисляя их через запятую. Если установлен цвет фона при помощи свойства , то он (цвет) будет отображаться до тех пор, пока загружается фоновое изображение или в случае его недоступности. Рассмотрим синтаксис:

Код CSS

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

1. – URL-адрес изображения. Чтобы указать несколько изображений, разделите URL-адреса запятой;
2. – фоновое изображение не будет отображаться. Оно по умолчанию;
3. – устанавливает линейный градиент в качестве фона. Определите как минимум два цвета (сверху вниз);
4. – устанавливает радиальный градиент в качестве фонового изображения. Определите как минимум два цвета (от центра до краев);
5. – повторяет линейный градиент;
6. – повторяет радиальный градиент.

Пример:

Код CSS

Цветовые модели

Цвет в CSS можно задавать несколькими способами:

1. Шестнадцатеричным числом. Самый популярный способ. Чтобы записать значение в шестнадцатеричной системе счисления необходимо к привычному числовому ряду 0-9 добавить пять первых латинских букв. Самое маленькое число – 0, а самое большое – f. Схема записи цвета в шестнадцатеричном формате: знак решетки #, степень выраженности красного (от 00 до ff), зеленого и синего цвета. Например, тот же красный цвет фона в шестнадцатеричном формате был бы записан как background-color: #FF0000.
2. По цветовой модели RGB. В принципе, то же самое, что и прошлый вариант, просто запись несколько иная. Здесь также цвет получается путем смешивания красного, зеленого и синего цветов в определенных пропорциях (от 0 до 255). Но записывается он несколько по-иному: rgb(0, 255, 0); На первом месте в скобках находится красный, на втором – зеленый, а на третьем – синий цвет. В этом примере фон будет зеленым. Черный цвет обозначается нулями, а белый – цифрами 255.
3. RGBA. То же RGB, но с альфа-каналом. Проще говоря, с эффектом прозрачности. Если интенсивность цвета колеблется в пределах от 0 до 255, то альфа-канал – от 0 до 1. Если записать свойство background-color: rgba(0, 255, 0,0), эффект будет аналогичный значению «transparent». Значение 1 аналогично такому же RGB, только без альфа-канала.
4. HSL. Гибкая цветовая модель, которая включает не только тон, но и насыщенность с яркостью. Записывается он так же, как и RGB: hsl(165, 100%, 50%). Первое значение – это цветовой тон, обозначаемый в градусах. Второе – насыщенность, а третье – яркость.
5. HSLA. То же, что и HSL, только с альфа-каналом.

Также можно использовать стандартные цветовые обозначения: red, green, blue, yellow и другие.

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

Это свойство используется для заливки фона элемента цветом. В качестве значений можно использовать:

HEX или HEX с альфа-каналом

НЕХ (hexadecimal) — обозначение цвета в шестнадцатеричной системе счисления. Цвет задается в виде числа, состоящего из 6 символов, где первые два определяют красную часть цвета, следующие два — зеленую, а два последних — синюю. Перед числом ставится символ #, который означает, что следующий за ним набор цифр и букв — это шестнадцатеричное число.

Можно также задать прозрачность цвета, добавив в конце числа еще 2 символа (например, 00 — полностью прозрачный, ff — полностью непрозрачный). Эта фича поддерживается практически всеми браузерами, за исключением IE (не удивительно), Opera Mini и Opera Mobile.

RGB или RGBa

Цвет можно задать при помощи функций CSS и . Синтаксис предельно простой — значения красного, зеленого и синего (от 0 до 255) указываются через запятую. В функции указывается четвертый параметр — прозрачность (либо в процентах, либо в виде десятичной дроби от 0 до 1).

HSL или HSLa

HSL — расшифровывается как Hue — тон, Saturation — насыщенность и Lightness — светлота (да, есть такое слово). В CSS есть специальные функции для указания цвета в таком формате — и . В качестве аргументов обеих по порядку указываются:

• hue — расположение тона на цветовом колесе (от 0 до 360)
• saturation — насыщенность или интенсивность тона, т.е. степень его отличия от серого цвета, где 0% — серый, а 100% — полный цвет.
• lightness — светлота или яркость, где 0% — максимально темный (черный), 50% — нормальный, 100% — максимально светлый (белый)
• alpha (только для ) — прозрачность, которая указывается либо в процентах либо в виде десятичной дроби (0% или 0 — полностью прозрачный, 100% или 1 — полностью непрозрачный).

HTML-цвета

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

Ключевые слова

Кроме описанных выше вариантов, для указания цвета фона элемента в CSS можно использовать специальные ключевые слова:

• — устанавливает в качестве цвета фона дефолтное значение, т.е. transparent
• — задает цвет фона как у родительского элемента
• — делает фон элемента прозрачным
• — переменная, значение которой соответствует значению свойства текущего элемента, а если оно не задано, используется родительского элемента.

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

Использование нескольких фоновых изображений

Долгое время к элементам разрешалось добавлять только одно фоновое изображение за раз, что создавало немало трудностей при дизайне страниц. К счастью, в CSS3 мы можем использовать более одного фонового изображения для элемента, разделяя запятыми несколько фонов в свойстве background или background-image.

Фоновое изображение идущее первым будет на переднем плане, а последнее в списке фоновое изображение будет на заднем плане. Любое значение между первым и последним будет, соответственно, располагаться посередине между ними. Вот пример CSS для элемента <div>, который использует три фоновых изображения:

Данный код использует сокращённое значение для свойства background, связывая несколько фоновых картинок вместе. Эти сокращённые значения также могут быть разбиты по свойствам background-image, background-position и background-repeat со значениями, разделёнными запятыми.

Пример нескольких фоновых изображений

Давайте ещё раз вернёмся к сообщению об успехе, чтобы объединить фоновую картинку галочки с градиентом.

Чтобы сделать это, мы включим два значения во второе свойство background. Первое значение будет картинкой галочки на переднем плане. Второе значение будет линейным градиентом на заднем плане. Эти два значения разделяются запятой.

HTML

CSS

The problem

If we want an element to have a semi-transparent background, and let whatever is behind it shine through, we have two options:

• Using CSS and opacity
• Creating a 24-bit PNG background image

The problem with using opacity in CSS, besides the annoying syntax to cater to all web browsers, is that not only the background of the element will have transparency, but all of its child elements as well. This means that any text within will have the same opacity, which I would dare to venture is very seldom the result one wants. You can cater to this problem with creating redundant elements, some tricky CSS positioning and such, but really, it’s a mess.

The problem with PNG images is, beside a superfluous HTTP request, that images are way, way more larger in file size than one or two lines of CSS code – especially considering that the image has to be a bit larger to avoid serious memory leak issues with 24-bit PNG images with alpha transparency in Internet Explorer.

Transparency Background Color on hover Effect Using CSS

In addition to above all methods, you can also make a transparent background color only on hover using the CSS color. The example uses the same CSS and div content and applies the effect on hover to the div element. See the example given below to check the hover effect:

Test it Live

Example

XHTML

<style>
.main-divhover{
background-image: url(../../wp-content/uploads/2018/05/stop-accidentally-publish-post-wordpress.jpg);
background-attachment: scroll;
padding: 20px;
}
.main-divhover:hover .transparent-bghover{
background: rgba(255, 165, 0, 0.73) !important;
}
.transparent-bghover{
background: orange;
padding: 20px;
color: #fff;
text-align: center;
font-size: 26px;
}
</style>
<div class=»main-divhover»>
<div class=»transparent-bghover»>
Transparent Background
</div>
</div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<style> .main-divhover{ background-imageurl(../../wp-content/uploads/2018/05/stop-accidentally-publish-post-wordpress.jpg); background-attachmentscroll; padding20px; } .main-divhover:hover .transparent-bghover{ backgroundrgba(255,165,0,0.73)!important; } .transparent-bghover{ backgroundorange; padding20px; color#fff; text-aligncenter; font-size26px; } </style> <div class=»main-divhover»> <div class=»transparent-bghover»> Transparent Background </div> </div>

Output

You can hover over the above example to see the transparent background effect. It uses the CSS color property that applies when someone hovers over the above content.

You may also like to read

• How to Create Image Hover Overlay Effect Using CSS.
• How to change background transparency Without Affecting Child

I hope you like this post on how to apply opacity to the background color using CSS.

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.

More Examples

Example

Specify the background color with a HEX value:

body {background-color: #92a8d1;}

Example

Specify the background color with an RGB value:

body {background-color: rgb(201, 76, 76);}

Example

Specify the background color with an RGBA value:

body {background-color: rgba(201, 76, 76, 0.3);}

Example

Specify the background color with a HSL value:

body {background-color: hsl(89, 43%, 51%);}

Example

Specify the background color with a HSLA value:

body {background-color: hsla(89, 43%, 51%, 0.3);}

Example

Set background colors for different elements:

body {  background-color: #fefbd8;}h1 {  background-color: #80ced6;}div {  background-color: #d5f4e6;
}span {  background-color: #f18973;}

Прозрачность картинки

Для создания эффекта прозрачности в CSS используется свойство opacity.

Браузер IE8 и более ранние его версии поддерживают альтернативное свойство — , где «» может принимать значение от до , чем меньше значение, тем прозрачнее будет элемент.

Все остальные браузеры поддерживают стандартное CSS свойство , которое может принимать в качестве значения числа от до , чем меньше значение, тем прозрачнее будет элемент:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .myClass {
        float: left;
        margin-right: 5px;
        opacity: 0.4;
        filter: alpha(opacity=40); /*для IE8 и более ранних версий*/
      }
    </style>
  </head>

  <body>
    <img src="klematis.jpg" class="myClass">
	<img src="klematis.jpg">
  </body>
</html>

Попробовать »

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

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

Код CSS

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

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

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

Код CSS

Прозрачность

CSS позволяет легко изменять уровни прозрачности элементов. Для этого мы будем использовать свойство opacity и модель RGBa.

Свойство opacity или как сделать фон страницы в html прозрачным

Свойство opacity используется для указания уровня непрозрачности (который является обратным для прозрачности).

• При значении 1 элемент будет полностью непрозрачным: это поведение по умолчанию.
• При значении 0 элемент будет полностью прозрачным.

Вам нужно выбрать значение от до 1. При значении 0,6 элемент будет на 60% непрозрачным, и вы сможете видеть сквозь него!

Вот как это можно использовать:

p
{
opacity: 0.6;
}

Вот пример, который даст представление о прозрачности.

body
{
background: url('snow.png');
}
p
{
background-color: black;
color: white;
opacity: 0.3;
}

Прозрачный абзац

Прозрачность работает во всех браузерах, включая Internet Explorer, начиная с версии IE9 и выше.

Если вы примените свойство opacity к элементу веб-страницы, все содержимое этого элемента станет прозрачным. Если хотите сделать цвет фона прозрачным, лучше всего использовать указание RGBa.

Модель RGBa

CSS3 предоставляет еще один способ изменения прозрачности: модель RGBa. Это RGB, которое мы рассматривали ранее, но с четвертым параметром: уровнем прозрачности (альфа-каналом). При значении 1 фон полностью непрозрачен. При значении менее 1 он становится прозрачным.

p
{
background-color: rgba(255, 0, 0, 0.5); /* Красный, полупрозрачный фон */
}

Это обозначение распознают все современные браузеры, включая Internet Explorer (начиная с версии IE9 и выше). Для устаревших браузеров рекомендуется указывать стандартный код RGB, в дополнение к RGBa.

p
{
background-color: rgb(255,0,0); /* Для старых браузеров */
background-color: rgba(255,0,0,0.5); /* Для новых браузеров */
}

Color Names

Below is a list of the color names to choose from:

Color Name	Hex Value	Swatch
aliceblue	#F0F8FF
antiquewhite	#FAEBD7
aqua	#00FFFF
aquamarine	#7FFFD4
azure	#F0FFFF
beige	#F5F5DC
bisque	#FFE4C4
black	#000000
blanchedalmond	#FFEBCD
blue	#0000FF
blueviolet	#8A2BE2
brown	#A52A2A
burlywood	#DEB887
cadetblue	#5F9EA0
chartreuse	#7FFF00
chocolate	#D2691E
coral	#FF7F50
cornflowerblue	#6495ED
cornsilk	#FFF8DC
crimson	#DC143C
cyan	#00FFFF
darkblue	#00008B
darkcyan	#008B8B
darkgoldenrod	#B8860B
darkgray	#A9A9A9
darkgrey	#A9A9A9
darkgreen	#006400
darkkhaki	#BDB76B
darkmagenta	#8B008B
darkolivegreen	#556B2F
darkorange	#FF8C00
darkorchid	#9932CC
darkred	#8B0000
darksalmon	#E9967A
darkseagreen	#8FBC8F
darkslateblue	#483D8B
darkslategray	#2F4F4F
darkslategrey	#2F4F4F
darkturquoise	#00CED1
darkviolet	#9400D3
deeppink	#FF1493
deepskyblue	#00BFFF
dimgray	#696969
dimgrey	#696969
dodgerblue	#1E90FF
firebrick	#B22222
floralwhite	#FFFAF0
forestgreen	#228B22
fuchsia	#FF00FF
gainsboro	#DCDCDC
ghostwhite	#F8F8FF
gold	#FFD700
goldenrod	#DAA520
gray	#808080
grey	#808080
green	#008000
greenyellow	#ADFF2F
honeydew	#F0FFF0
hotpink	#FF69B4
indianred	#CD5C5C
indigo	#4B0082
ivory	#FFFFF0
khaki	#F0E68C
lavender	#E6E6FA
lavenderblush	#FFF0F5
lawngreen	#7CFC00
lemonchiffon	#FFFACD
lightblue	#ADD8E6
lightcoral	#F08080
lightcyan	#E0FFFF
lightgoldenrodyellow	#FAFAD2
lightgray	#D3D3D3
lightgrey	#D3D3D3
lightgreen	#90EE90

Color Name	Hex Value	Swatch
lightpink	#FFB6C1
lightsalmon	#FFA07A
lightseagreen	#20B2AA
lightskyblue	#87CEFA
lightslategray	#778899
lightslategrey	#778899
lightsteelblue	#B0C4DE
lightyellow	#FFFFE0
lime	#00FF00
limegreen	#32CD32
linen	#FAF0E6
magenta	#FF00FF
maroon	#800000
mediumaquamarine	#66CDAA
mediumblue	#0000CD
mediumorchid	#BA55D3
mediumpurple	#9370D8
mediumseagreen	#3CB371
mediumslateblue	#7B68EE
mediumspringgreen	#00FA9A
mediumturquoise	#48D1CC
mediumvioletred	#C71585
midnightblue	#191970
mintcream	#F5FFFA
mistyrose	#FFE4E1
moccasin	#FFE4B5
navajowhite	#FFDEAD
navy	#000080
oldlace	#FDF5E6
olive	#808000
olivedrab	#6B8E23
orange	#FFA500
orangered	#FF4500
orchid	#DA70D6
palegoldenrod	#EEE8AA
palegreen	#98FB98
paleturquoise	#AFEEEE
palevioletred	#D87093
papayawhip	#FFEFD5
peachpuff	#FFDAB9
peru	#CD853F
pink	#FFC0CB
plum	#DDA0DD
powderblue	#B0E0E6
purple	#800080
red	#FF0000
rosybrown	#BC8F8F
royalblue	#4169E1
saddlebrown	#8B4513
salmon	#FA8072
sandybrown	#F4A460
seagreen	#2E8B57
seashell	#FFF5EE
sienna	#A0522D
silver	#C0C0C0
skyblue	#87CEEB
slateblue	#6A5ACD
slategray	#708090
slategrey	#708090
snow	#FFFAFA
springgreen	#00FF7F
steelblue	#4682B4
tan	#D2B48C
teal	#008080
thistle	#D8BFD8
tomato	#FF6347
turquoise	#40E0D0
violet	#EE82EE
wheat	#F5DEB3
white	#FFFFFF
whitesmoke	#F5F5F5
yellow	#FFFF00
yellowgreen	#9ACD32

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-attachment устанавливает прокрутку фона

При работе с фоном часто требуется зафиксировать изображение фона, чтобы при прокрутке элемента оно не прокручивалось вместе с элементом. Это позволяет реализовать свойство . Его синтаксис представлен ниже. Через запятую можно перечислить различные значения, если указано несколько фоновых изображений.

Код CSS

Как видно из вышеприведенного кода, данное свойство имеет пять значений. Что они означают:

1. – фоновое изображение будет прокручиваться вместе со страницей. Оно установлено по умолчанию.
2. – фоновое изображение не будет прокручиваться вместе со страницей.
3. – фоновое изображение будет прокручиваться вместе с содержимым элемента.
4. – устанавливается значение по умолчанию.
5. – наследует значение свойства родителя.

Код HTML

Код CSS

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

Значения цвета

В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:

Так же, как название цвет «Tomato»:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Так же, как название цвета «Tomato», но 50% прозрачный:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Пример

<h1 style=»background-color:rgb(255,
99, 71);»>…</h1><h1 style=»background-color:#ff6347;»>…</h1><h1 style=»background-color:hsl(9,
100%, 64%);»>…</h1><h1 style=»background-color:rgba(255,
99, 71, 0.5);»>…</h1><h1 style=»background-color:hsla(9,
100%, 64%, 0.5);»>…</h1>

Combining it all

With all techniques learned above, let’s put it together in a working CSS rule:

	.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);
		/* For IE 5.5 - 7*/
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
		/* For IE 8*/
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	}

NOTE! In addition to this, you have to declare for IE web browsers, preferably served via conditional comments or similar!