Прозрачность
Содержание:
- CSS Tutorial
- Использование css-свойства opacity
- CSS Opacity in Internet Explorer
- Sumário
- CSS Tutorial
- Проблемы доступности
- Примеры: как прозрачность в html
- color
- CSS Properties
- Set Background Color Opacity Using Alpha Channel Color Notations
- HSLA Colors
- Compatibilidade com navegadores
- Техническая сторона вопроса: задаем прозрачность фона
- RGBA
- Прозрачность контента
- Примеры
- Способ 3 — opacity
- Transparency Through HSLA
- CSS Reference
- CSS Properties
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
Использование css-свойства opacity
Opacity является универсальным инструментом, и с его помощью вы можете задать желаемый уровень прозрачности в css как для любого элемента на странице, так и для фона.
Синтаксис свойства css:
opacity: значение;
где значение указывается в диапазоне от 0.0 (элемент полностью прозрачен) до 1.0 (элемент абсолютно не прозрачен).
Итак, для примера сделаем блок с классом fon, и для него зададим, для наглядности, фоновое изображение. В этом блоке разместим два блока с текстом opas1 и opas2, для которых зададим черный фон. После чего для второго блока зададим значение opacity равное 0.3.
Вот что получится:
Блок без прозрачности
Демонстрация работы свойства css opacity
HTML-код примера:
XHTML
<div class=»fon»>
<div class=»opas1″>
Блок без прозрачности
</div>
<div class=»opas2″>
Демонстрация работы свойства css opacity
</div>
<div>
|
1 |
<div class=»fon»> <div class=»opas1″> Блок без прозрачности <div class=»opas2″> Демонстрация работы свойства css opacity |
CSS-код:
CSS
.fon{
background:url(images/opacity1.jpg);
width:400px;
padding:30px;
margin:auto;
}
.opas1{
width: 300px;
padding:30px;
background:#000;
margin:auto;
text-align:center;
margin:10px;
font-size:18px;
color:#fff;
}
.opas2{
width: 300px;
padding:30px;
background:#000;
margin:auto;
text-align:center;
opacity:0.3; /* уровень прозрачности в css*/
margin:10px;
font-size:18px;
color:#fff;
}
|
1 |
.fon{ backgroundurl(images/opacity1.jpg); width400px; padding30px; marginauto; } .opas1{ width300px; padding30px; background#000; marginauto; text-aligncenter; margin10px; font-size18px; color#fff; } .opas2{ width300px; padding30px; background#000; marginauto; text-aligncenter; opacity0.3;/* уровень прозрачности в css*/ margin10px; font-size18px; color#fff; } |
Как видите, свойство css сработало, блок с классом opas2 стал прозрачным и через него проглядывается фоновое изображение.
Но здесь есть один неприятный момент. Как вы могли заметить, текст потускнел, то есть он тоже стал прозрачным. Это произошло из-за того, что все дочерние элементы блока, в нашем случае – текст, унаследовали прозрачность заданную в css.
Получается, что данное css-свойство мы можем использовать для придания прозрачности блоку на странице только в том случае, если он не содержит никакого текста.
А что же делать, если нам нужно задать в css прозрачность фона для блока, но при этом сохранить читабельность содержащегося в нем текста?
CSS Opacity in Internet Explorer
As usual, Internet Explorer doesn’t play well with others, and since there are currently three different versions of Internet Explorer in common use, the transparency settings are different, and sometimes require additional CSS to get them to work.
.myElement {
filter: alpha(opacity=40);
}
The above css uses the proprietary property to get transparency to work in Internet Explorer versions 6-8. There is one caveat for IE6 and IE7: In order for the transparency settings to take effect, the element in question needs to “have layout”. An element can be given layout using a number of CSS properties, including and . For details on the Microsoft-only property, and how to trigger it, see this article.
Another way to set transparency via CSS in Internet Explorer 8 uses the following syntax (note the comments that indicate which versions):
.myElement {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* above line works in IE6, IE7, and IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
/* above line is IE8 only */
}
The first line will work in all currently-in-use versions of IE, and the second line works only in IE8. Notice the differences between the two lines: In line two, there is a prefix attached to the property, and there are quotations around the entire value declaration, both of which are necessary for that syntax to work.
To be honest, I really have no idea why you would even need either of the “progid” methods, since the filter property works on any element that has layout in all versions of IE using the syntax , as shown in the first example in this section.
Update: Evidently, in order to get IE8 in compatibility mode to recognize opacity settings, you need to do the following, in this order:
.myElement {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
filter: alpha(opacity=40);
}
Basically, if you’re including the IE8-as-IE7 meta tag in your site’s code, or you’re worried that IE8 users will be hitting the compatibility mode button, then this would be necessary. Otherwise, just use the plain method (first example).
Thanks to the comment for providing the source for this info. I haven’t actually tested to confirm this, but the referenced website is quite reliable, so I will assume it’s correct.
Sumário
A propriedade CSS opacity especifica a transparência de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto.
O valor aplica-se ao elemento como um todo, incluindo seu conteúdo, apesar de o valor não ser herdado por elementos filhos. Assim, um elemento e seus elementos filhos têm todos a mesma opacidade relativa ao background do elemento, mesmo se o elemento e seus elementos filhos tiverem opacidades diferentes entre si.
Se você não quer aplicar a opacidade ao elemento filho — use isto:
Usando essa propriedade com um valor diferente de 1, o elemento é colocado em um novo contexto de empilhamento.
| Initial value | |
|---|---|
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | the specified value, clipped in the range |
| Animation type | a |
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
Проблемы доступности
Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их. Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков
Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием
Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием
Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.
- WebAIM: Color Contrast Checker
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Примеры: как прозрачность в html
Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5
На странице преобразуется в следующее
Пример №2. Эффекты с прозрачностью в html
По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.
На странице преобразуется в следующее
Пример №3. Прозрачный блок на изображении в html
Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.
На странице преобразуется в следующее
ПримечаниеInternet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
Для обращения к opacity из JavaScript нужно писать следующую конструкцию:
color
Этот режим наложения влияет и на оттенок, и на насыщенность исходных пикселей, но игнорирует яркость. Наложенный поверх красновато-коричневый слой не только сделает исходные пиксели красновато-коричневыми, как это было в случае с режимом оттенка, но также придаст им такую же насыщенность, что обычно дает больше выразительного эффекта тонирования, чем просто оттенок.
Наложенный поверх красновато-коричневый слой не только сделает исходные пиксели красновато-коричневыми, как это было в случае с режимом , но также придаст им такую же насыщенность.
Того же эффекта можно достичь, если изменить порядок слоёв, поместив цвет под фотографию, и наложить фотографию с помощью режима наложения (Яркость).
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
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 */
HSLA Colors
HSLA color values are an extension of HSL color values with an alpha channel — which specifies the opacity
for a color.
An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the
alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);
The following example defines different HSLA colors:
Example
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo,
pois ainda não convertemos os dados que ela contém.
Descubra como você pode ajudar! (en-US)
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Suporte básico | 1.0 | 1.0 (1.7 or earlier) | 9.0 8.0 4.0 |
9.0 | 1.2 (125) |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suporte básico | 1.0 | 1.0 (1.7) | 9.0 8.0 4.0 |
9.0 | 3.2 |
Anterior ao Gecko 1.7 (Firefox 0.9) , a propriedade foi implementada de uma maneira não-padronizada (herdada). Com o Firefox 0.9, o comportamento mudou e a propriedade foi renomeada para Desde então, foi suportada somente como um alias para .
Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0) e posteriores não suportam e o suporte para no JavaScript foi removido no Gecko 13 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10). A partir de agora, você deve simplesmente usar .
Anterior à versão 9, Internet Explorer não suporta , em vez disso ele suporta uma propriedade com ou como valor (ambas são sinônimos). Do IE4 até o IE9 foi suportado a forma extendida . IE8introduziu , a qual é sinônimo de . Ambas foram removidas no IE10.
Similar à , tem estado morta desde o início de 2004 (lançamento do Safari 1.2).
Konqueror nunca teve suporte para e tem suportado a propriedade desde a versão 4.0.
Техническая сторона вопроса: задаем прозрачность фона
Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.
Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /- Mozi11a 1.6 m amme */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* C553 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.
Поэтому следует знать о таком варианте работы с прозрачностью (возьмем в качестве примера ситуацию, когда блок меню на прозрачном фоне должен быть непрозрачным).
Исходный код:
<div class="fon"› <div class="prozrachnost"›</div> <div class="menu"›</div> </div>
Видоизменяем код на такой:
.prozrachnost {
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:O.S;
background-color:#000000;
width:340px;
height:1500px;
position: absolute;
top:0px;
left:0px;
z-index:-1;
}
Задача решена. Такой метод можно использовать в тех случаях, когда нужно сделать непрозрачными те элементы, которые находятся внутри кода.
Техническая сторона вопроса: задаем прозрачность блока
Если прозрачность фона уже задана, то прозрачность блока, расположенного внутри него, в CSS задается автоматически. Об этом говорилось выше.
Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:
HTML код:
<div id="text">A я нет!</div> <div id="box">Я прозрачный!</div>
CSS стили:
body {
margin: 0;
padding: 0;
background: #66CCFF;
font-size: 20px;
}
#box {
margin: 20px;
background: #FFFFFF;
padding: 20px;
width: 300px;
height: 70px;
z-index: 0;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#text {
background: #FFFFFF;
width: 150px;
height: 30px;
padding: l0px;
z-index: 10;
position: absolute;
left: 70px;
top: 70px;
}
Сущность данного метода состоит в том, что блок, который надо сделать непрозрачным, не является на самом деле дочерним. Поэтому его прозрачность будет независимой величиной.
RGBA
Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity
здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba
, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..
Рис. 1. Синтаксис применения rgba
В примере 2 показано применение формата RGBA для создания полупрозрачного фона.
Пример 2. Полупрозрачный фон
HTML5
CSS3
IE 9+
Cr
Op
Sa
Fx
rgbaГоббс одним из первых осветил эту проблему с позиций психологии.
Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.
Рис. 2. Полупрозрачный фон и непрозрачный текст
Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).
Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.
Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…
С помощью RGBa
решение выглядит следующим образом:
1. Допустим, нам нужен синий фон с прозрачностью 50%.
А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x
2. Для IE можно постараться и сделать более изящно:
|
.element{ background filter:progid endColorstr= zoom: } |
Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF — полностью непрозрачный, 00 — прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.
Использование RGBa не ограничивается только фоновым цветом у блоков…
В CSS есть три способа изменить прозрачность элемента:с
помощью свойства opacity ,с
помощью функции rgba() ,с
помощью функции hsla() .
1. Свойство opacity
Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity , содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:
H1 {color: #CD6829;}
div {
background: #CDD6DB;
opacity: .3;
}
Рис. 1. Прозрачность элементов с помощью opacity
2. Функция rgba()
Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red)
, зеленого (Green)
и синего (Blue)
цветов, а альфа-канал (Alpha)
отвечает за степень прозрачности цвета. В отличие от свойства opacity , для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.
3. Функция hsla()
Функция hsla() , параметры которой означают тон (Hue)
, насыщенность (Saturation)
, яркость (Lightness)
и альфа-канал (Alpha)
, также позволяет задать полупрозрачный цвет.
Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. Сам круг разбит на сектора, на границах которых находятся основные цвета:
0/360° — красный цвет
60° — желтый цвет
120° — зеленый цвет
180° — голубой цвет
240° — синий цвет
270° — фиолетовый цвет
300° — пурпурный цвет
.
Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1) . Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1) , а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1) .
Прозрачность контента
Создавая средствами CSS-прозрачность контента, для начала стоит понять, как необходимо прописывать саму форму. Конечно же, в данном материале не будет углубления в стандартные теги для программирования страницы сайта в общем. Для наглядного примера речь пойдет о прямоугольной области, окрашенной монотонной заливкой. Чтобы отобразить ее, потребуется создать простенький файл стиля CSS с последующей привязкой, или же разместить код прямо на странице html-документа. Прописав для прямоугольного блока необходимые параметры высоты, ширины, цвета и контура, к стилю необходимо добавить код, позволяющий сделать прозрачность CSS-объекта. За это отвечает параметр «opacity: 0.X», так как это и есть уровень видимости. Чем ближе его значение к единице, тем объект становится незаметнее. Данный стиль будет исправно работать в браузерах, обладающих поддержкой CSS3. Такими инструкциями сейчас обладают практически все современные веб-обозреватели.
Примеры
Пример
Свойство opacity добавляет прозрачность к фону элемента, а также ко всем его дочерним элементам. Это делает текст внутри прозрачного элемента трудно читаемым:
div.first { opacity: 0.1;}div.second {
opacity: 0.3;}div.third { opacity: 0.6;
}
Пример
Чтобы не применять непрозрачность к дочерним элементам (как в примере выше), используйте вместо этого значения цвета RGBA. В следующем примере устанавливается непрозрачность для цвета фона, но не для текста:
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);}
Редактор кода »
Совет: Узнать больше о цветах RGB в CSS RGBA Цвета.
Пример
Как использовать JavaScript для изменения непрозрачности элемента:
function myFunction(x) {// Возвращает текст выбранного параметра var opacity = x.options.text; var el = document.getElementById(«p1»);
if (el.style.opacity !== undefined) { el.style.opacity = opacity; } else {
alert(«Ваш браузер не поддерживает этот пример!»); }
}
Способ 3 — opacity
Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате .
В общем-то, на данный момент это все известные мне способы задания прозрачного цвета в css. Зачем это нужно, это уже другой вопрос. Через прозрачный фон может быть видно то, что находится под ним. Иногда так нужно сделать по дизайну. В целом, прием с полупрозрачностью сегодня очень распространен.
Надеюсь, вы запомните и воспользуетесь для себя каким-нибудь из этих трех способов. А у меня на этом все.
Transparency Through HSLA
Similar to the previous declaration, CSS3 also allows the ability to set a color along with an alpha value using HSLA, which represents Hue, Saturation, Lightness, and Alpha. Here is an example of HSLA transparency:
.hsla {
background: hsla(207, 38%, 47%, .4);
}
For a further explanation on HSLA colors, see . As is the case with RGBA transparency, the last number represents the transparency setting, and works the same way as RGBA.
One important benefit to note about both RGBA and HSLA transparency is that these transparency settings don’t affect child elements the way the property does. The alpha setting for RGBA and HSLA affects the opacity of the background color only and nothing else (thanks to for pointing this out).
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
