Содержание
- 1 HTML Tutorial
- 2 All CSS Background Properties
- 3 CSS Tutorial
- 4 CSS Reference
- 5 CSS Properties
- 6 More Examples
- 7 Полупрозрачный фон
- 8 CSS Tutorial
- 9 Definition and Usage
- 10 CSS Справочники
- 11 CSS Свойства
- 12 CSS background-clip Property
- 13 CSS Reference
- 14 CSS Properties
- 15 Примеры
- 16 More Examples
- 17 JavaScript
- 18 CSS Свойства
- 19 More Examples
HTML Tutorial
HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors Colors RGB HEX HSL
HTML CSSHTML Links Links Link Colors Link Bookmarks
HTML Images Images Image Map Background Images The Picture Element
HTML TablesHTML Lists Lists Unordered Lists Ordered Lists Other Lists
HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML
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) |
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 Style Font Size Font Google Font Shorthand
CSS IconsCSS LinksCSS ListsCSS TablesCSS 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 Specificity
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS 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
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
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
More Examples
Example
Specify the size of a background image with percent:
#example1 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: 100% 100%;} #example2 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: 75% 50%;}
Example
Specify the size of a background image with «cover»:
#example1 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: cover; }
Example
Specify the size of a background image with «contain»:
#example1 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: contain;}
Example
Here we have two background images. We specify the size of the first background image with «contain», and the second background-image with «cover»:
#example1 { background: url(img_tree.gif), url(mountain.jpg); background-repeat: no-repeat; background-size: contain, cover;}
Example
Use different background properties to create a «hero» image:
.hero-image { background-image: url(«photographer.jpg»); /* The image used */ background-color: #cccccc; /* Used if the image is unavailable */ height: 500px; /* You must set a specified height */ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */}
Полупрозрачный фон
Формат RGBA позволяет задать цвет фона элемента полупрозрачным, тогда сквозь него будет проступать фон веб-страницы. Более заметно и эффектно это выглядит, когда у нас имеется фоновая картинка или узор, а не однотонный цвет. Тогда сквозь фон будет проступать рисунок, но при этом сохранится читаемость текста (рис. 2).
Рис. 2. Полупрозрачный фон
В примере 2 показано использование формата RGBA для создания такого фона.
Пример 2. Формат RGBA
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон</title> <style> body { background: url(/example/image/aquaria.jpg); /* Фоновая картинка */ background-size: cover; /* Растягиваем фон */ } .block { background: rgba(0,0,0,0.6); /* Полупрозрачный фон */ color: #fff; /* Цвет текста */ padding: 20px; /* Поля вокруг текста */ } </style> </head> <body> <div class=»block»> <h1>Подводный мир</h1> <p>В глубинах морей и океанов, существует свой, не сравнимый ни с чем , удивительный, и не похожий на тот, что окружает нас с вами подводный мир.</p> </div> </body> </html>
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 Style Font Size Font Google Font Shorthand
CSS IconsCSS LinksCSS ListsCSS TablesCSS 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 Specificity
Definition and Usage
The property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
opacity 0.2
opacity 0.5
opacity 1(default)
Note: When using the property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See «More Examples» below).
Default value: | 1 |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. Read about animatable Try it |
Version: | CSS3 |
JavaScript syntax: | object.style.opacity=»0.5″ Try it |
CSS Справочники
CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS ЦветаCSS Значение цветаCSS по умолчаниюCSS Символы
CSS Свойства
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 caption-side caret-color @charset clear clip 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-kerning font-size font-size-adjust font-stretch font-style font-variant font-weight 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 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
CSS background-clip Property
The CSS property specifies the painting area of the background.
The property takes three different values:
- border-box — (default) the background is painted to the outside edge of the border
- padding-box — the background is painted to the outside edge of the padding
- content-box — the background is painted within the content box
The following example illustrates the property:
Example
#example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box;}
Property | Description |
---|---|
background | A shorthand property for setting all the background properties in one declaration |
background-clip | Specifies the painting area of the background |
background-image | Specifies one or more background images for an element |
background-origin | Specifies where the background image(s) is/are positioned |
background-size | Specifies the size of the background image(s) |
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS 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
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
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
Примеры
Пример
Укажите цвет фона с значением HEX:
body {background-color: #92a8d1;}
Пример
Укажите цвет фона со значением RGB:
body {background-color: rgb(201, 76, 76);}
Пример
Укажите цвет фона со значением RGBA:
body {background-color: rgba(201, 76, 76, 0.3);}
Пример
Укажите цвет фона со значением HSL:
body {background-color: hsl(89, 43%, 51%);}
Пример
Укажите цвет фона со значением HSLA:
body {background-color: hsla(89, 43%, 51%, 0.3);}
Пример
Установите цвета фона для различных элементов:
body { background-color: #fefbd8;}h1 { background-color: #80ced6;}div { background-color: #d5f4e6; }span { background-color: #f18973;}
More Examples
Example
Sets two background images for the <body> element. Let the first image appear only once (with no-repeat), and let the second image be repeated:
body { background-image: url(«img_tree.gif»), url(«paper.gif»); background-repeat: no-repeat, repeat; background-color: #cccccc;}
Example
Use different background properties to create a «hero» image:
.hero-image { background-image: url(«photographer.jpg»); /* The image used */ background-color: #cccccc; /* Used if the image is unavailable */ height: 500px; /* You must set a specified height */ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */}
Example
Sets a linear-gradient (two colors) as a background image for a <div> element:
#grad1 { height: 200px; background-color: #cccccc; background-image: linear-gradient(red, yellow);}
Example
Sets a linear-gradient (three colors) as a background image for a <div> element:
#grad1 { height: 200px; background-color: #cccccc; background-image: linear-gradient(red, yellow, green);}
Example
The repeating-linear-gradient() function is used to repeat linear gradients:
#grad1 { height: 200px; background-color: #cccccc; background-image: repeating-linear-gradient(red, yellow 10%, green 20%);}
Example
Sets a radial-gradient (two colors) as a background image for a <div> element:
#grad1 { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, yellow);}
Example
Sets a radial-gradient (three colors) as a background image for a <div> element:
#grad1 { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, yellow, green);}
Example
The repeating-radial-gradient() function is used to repeat radial gradients:
#grad1 { height: 200px; background-color: #cccccc; background-image: repeating-linear-gradient(red, yellow 10%, green 20%);}
JavaScript
JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()
JS Boolean constructor prototype toString() valueOf()
JS Classes constructor() extends static super
JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()
JS Error name message
JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()
JS JSON parse() stringify()
JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()
JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()
JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx
JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while
JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()
CSS Свойства
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-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-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-eventspositionquotesresizerighttab-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
More Examples
Example
The opacity property adds transparency to the background of an element, and to all of its child elements as well. This makes the text inside a transparent element hard to read:
div.first { opacity: 0.1;}div.second { opacity: 0.3;}div.third { opacity: 0.6; }
Example
To not apply opacity to child elements (like in the example above) use RGBA color values instead. The following example sets the opacity for the background color, but not for the text:
div.first { background: rgba(76, 175, 80, 0.1);}div.second { background: rgba(76, 175, 80, 0.3); }div.third { background: rgba(76, 175, 80, 0.6);}
Try it Yourself »
Tip: Learn more about RGBA Colors in CSS RGBA Colors.
Example
How to use JavaScript to change the opacity for an element:
function myFunction(x) {// Return the text of the selected option var opacity = x.options.text; var el = document.getElementById(«p1»); if (el.style.opacity !== undefined) { el.style.opacity = opacity; } else { alert(«Your browser doesn’t support this example!»); } }
С этим читают