Как сделать прозрачный блок css стилями и идти в ногу с современными трендами сайтостроения

Свойство opacity

Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).

Пример 2. Использование opacity

XHTML 1.0CSS 2.1CSS 3IECrOpSaFx

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

Рис. 5. Полупрозрачность текста и фона

В Internet Explorer до версии 8.0 включительно opacity не работает, поэтому для него используется специфичное для этого браузера свойство filter. Естественно, оно приводит к невалидному коду CSS.

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 Style
Font Size
Font Google
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 Specificity

Javascript opacity симбиоз

Теперь попробуем установить прозрачность через скрипт с учетом особенностей разных браузеров описанных выше.

Function setElementOpacity(sElemId, nOpacity)
{
var opacityProp = getOpacityProperty();
var elem = document.getElementById(sElemId);
if (!elem || !opacityProp) return; // Если не существует элемент с указанным id или браузер не поддерживает ни один из известных функции способов управления прозрачностью

if (opacityProp==»filter») // Internet Exploder 5.5+

{
nOpacity *= 100;
// Если уже установлена прозрачность, то меняем её через коллекцию filters, иначе добавляем прозрачность через style.filter

var oAlpha = elem.filters || elem.filters.alpha;
if (oAlpha) oAlpha.opacity = nOpacity;
else elem.style.filter += «progid:DXImageTransform.Microsoft.Alpha(opacity=»+nOpacity+»)»; // Для того чтобы не затереть другие фильтры используем «+=»

}
else // Другие браузеры

elem.style = nOpacity;
}
function getOpacityProperty()
{
if (typeof document.body.style.opacity == «string») // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9)

return «opacity»;
else if (typeof document.body.style.MozOpacity == «string») // Mozilla 1.6 и младше, Firefox 0.8

return «MozOpacity»;
else if (typeof document.body.style.KhtmlOpacity == «string») // Konqueror 3.1, Safari 1.1

return «KhtmlOpacity»;
else if (document.body.filters && navigator.appVersion.match(/MSIE (+);/)>=5.5) // Internet Exploder 5.5+

return «filter»;
return false; //нет прозрачности

}

Функция принимает два аргумента: sElemId — id элемента, nOpacity — вещественное число от 0.0 до 1.0 задающее прозрачность в стиле CSS3 opacity.

Думаю, что стоит пояснить часть кода функции setElementOpacity относящуюся к IE.

Var oAlpha = elem.filters || elem.filters.alpha;
if (oAlpha) oAlpha.opacity = nOpacity;
else elem.style.filter += «progid:DXImageTransform.Microsoft.Alpha(opacity=»+nOpacity+»)»;

Может возникнуть вопрос, а почему бы ни устанавливать прозрачность путем присваивания (=) свойству elem.style.filter = «…»; ? Зачем используется «+=» для добавления в конец строки свойства filter ? Ответ прост, для того чтобы не «затереть» другие фильтры. Но при этом, если добавить фильтр таким образом второй раз, то он не изменит ранее установленные значения этого фильтра, а будет просто добавлен в конец строки свойства, что не корректно. Поэтому, если фильтр уже установлен, то нужно им манипулировать через коллекцию примененных к элементу фильтров: elem.filters (но учтите, если фильтр ещё не был назначен элементу, то управлять им через данную коллекцию невозможно). Доступ к элементам коллекции возможен либо по имени фильтра, либо по индексу. Однако фильтр может быть задан в двух стилях, в коротком стиле IE4, или в стиле IE5.5+, что и учтено в коде.

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).

Атрибут background-color

В CSS цвет фона можно задать несколькими способами: с помощью шестнадцатеричного кода, названия цвета или RGB-записи. В CSS3 стало возможно использовать вместо RGB-записи вариант с RGBA.

Шестнадцатеричный код цвета записывается в свойстве после решетки: background-color: #FFDAB9. Если же символы в такой записи попарно совпадают, код обычно немного сокращают: #ccff00 можно записать как #cf0:

body {background-color: #cf0;}.

Название есть даже у самых экзотичных цветов. Например, помимо стандартных red и white вы можете использовать NavajoWhite (#FFDEAD) или Honeydew2 (#E0EEE0):

body {background-color: purple;}.

Последний вариант RGB или RGBA записи позволяет задавать не только цвет, но и прозрачность фона CSS, однако способ работает в IE только старше 9 версии. Остальные браузеры нормально распознают вариант с прозрачностью. По стандартам W3C предпочтительно использовать все-таки RGBA вместо более привычного RGB.

Последнее значение у RGBA и задает непрозрачность фона от 0 (прозрачный) до 1 (непрозрачный).

Есть еще некоторые необычные значения. Цвет фона можно задать с помощью HSL и HSLA. Оба были добавлены в CSS3, а потому не поддерживаются IE ниже 9 версии. Варианты идентичны RGB или RGBA, только в другом формате: Hue (оттенок — значение на цветовом круге, задается в градусах), Saturate (насыщенность — интенсивность цвета в процентах, от 0 до 100), Lightness (светлота — яркость, измеряется аналогично параметру Saturate).

Эффект прозрачности фона (HTML и CSS)

Рейтинг:  5 / 5

Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)

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

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

Рассмотрим полупрозрачность текста и фона — как правильно ее использовать в дизайне сайта:

opacity

Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными. Увеличить уровень прозрачности можно изменяя команду opacity от 0.1 до 1.

HTML 5 CSS 3 IE 9

RGBA

В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента.

Обычно в дизайне полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1, при этом 0 означает полную прозрачность, а 1 непрозрачность цвета — синтаксис применения rgba.

HTML 5 CSS 3 IE 9

ПРИМЕР ПОЛУПРОЗРАЧНОСТИ ФОНА RGBA

• < Назад
• Вперёд >

Прокрутка фона

Есть возможность установить, как будет двигаться фон блока при прокрутке страницы, а также при прокрутке
самого блока. Это делается с помощью свойства background-attachment. Оно может
принимать такие значения:

background-attachment: scroll — фон не движется относительно блока и движется
вместе с блоком при прокрутке страницы (по умолчанию)

background-attachment: fixed — фон зафиксирован относительно левого верхнего
угла окна браузера

background-attachment: local — фон движется вместе с содержимым при прокрутке
блока

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

Стиль:

#div5
  {
  width: 500px;
  height: 450px;
  background-image: url("image.jpg");
  overflow: auto;
  background-attachment: local;
  }

HTML код:

<div id="div5">
<div style="height: 800px; width: 10px; border: 1px solid Red"></div>
</div>

Попробуйте установить другие варианты прокрутки фона. Посмотрите, как будет двигаться фон блока.

Атрибут background-repeat

Как правило, если фон задан изображением, он должен повторяться по горизонтали или вертикали. Для этого и используется атрибут background-repeat. Так, фон блока, CSS которого содержит такое свойство, может иметь один из нескольких параметров:

• no-repeat
  — изображение появляется на странице в единственном варианте;
• repeat
  — фон повторяется по осям x и y;
• repeat-x
  — только по горизонтали;
• repeat-y
  — только по вертикали;
• space
  — фон повторяется, но если пространство заполнить не получается, то между картинками появляются пустоты;
• round
  — изображение масштабируется, если не получается всю область заполнить целыми картинками.

Пример использования атрибута:

body {background-repeat: no-repeat repeat}
— аналогично background-repeat: repeat-y.

В CSS3 возможно задать значения для нескольких изображений, если перечислять параметры через запятую.

Прозрачность при наведении

Псевдо-класс :hover позволяет изменять внешний вид элементов при наведении на них курсора мыши. Мы воспользуемся этой возможностью, чтобы изображение при наведении мыши теряло свою прозрачность:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Название документа</title> <style> img { float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*для IE8 и более ранних версий*/ } img:hover { opacity: 1.0; filter: alpha(opacity=100); } </style> </head> <body> <img src=»https://steptosleep.ru/wp-content/uploads/2018/06/45671.jpg»> <img src=»https://steptosleep.ru/wp-content/uploads/2018/06/53796.jpg»> </body> </html> Попробовать »

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

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

Возможно вы уже знакомы с моделью представления цвета в формате . (Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:

color: rgb(255,255,0);
color: rgb(100%,100%,0);

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

Объявление цвета схоже по синтаксису со стандартными правилами . Однако, кроме всего прочего, нам потребуется объявить значение как (вместо ) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от (полная прозрачность) до (полная непрозрачность).

color: rgba(255,255,0,0.5);
color: rgba(100%,100%,0,0.5);

Разница между свойством и заключается в том, что свойство применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):

body { background-image: url(img.jpg); }
.prim1 {
  width: 400px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  font-weight: bold;
  opacity: 0.5;
  filter: alpha(opacity=70); /*для IE8 и более ранних версий*/
  text-align: center;
}
.prim2 {
  width: 400px;
  margin: 30px 50px;
  background-color: rgba(255,255,255,0.5);
  border: 1px solid black;
  font-weight: bold;
  text-align: center;
}

Попробовать »
Примечание: значения не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения :

background: rgb(255,255,0);
background: rgba(255,255,0,0.5);

Solution: Put the background image into a pseudo-element of the parent.

To fix this issue, we need to put the background image into a child element of the parent. This will ensure that the background image and the text content will be on their own “layer” in the parent. You can then control each layer’s opacity without affecting each other!

One approach you can use is to put the  styles in a pseudo-element of the parent element.

Since the pseudo-element is a sort of child of the parent, you can change the opacity of it without affecting the text content.

To make that pseudo-element the same size as the parent, you’ll have to absolutely position it and set its top, right, bottom, and left values to zero so it doesn’t collapse. Also, as a pseudo-element, it needs to have the  property set, otherwise it won’t show up on the page.

(You can also put the background image into its own child element, but using a pseudo-element helps keep the HTML simplified.)

Then for the text, which we have in the  tag, you will need to set it to  so that it will be on top of the pseudo-element and background image. If you don’t explicitly set the  property, it will be hidden underneath the absolutely positioned pseudo-element in the .

Lastly, don’t forget to set the parent to  to keep the child !

Now, the text will still be at a default opacity of 1, and the reduced opacity setting will be limited to the background image in the pseudo-element.

I have the code for the above example in a Codepen— feel free to play around with it!

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!»);  }
}

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

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

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

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

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

XHTML 1.0CSS 2.1IECrOpSaFx

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

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

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

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

Атрибуты opacity и filter

Атрибут opacity позволяет задать прозрачность фона — CSS свойство будет работать во всех браузерах. Значение устанавливается в пределах от 0.0 до 1.0 включительно. При этом вы можете установить прозрачность фона CSSбез целого значения: вместо 0.3 достаточно написать.3:

.block {background-image: url(img.png); opacity: .3;}.

Чтобы задать прозрачность фона, CSS которого подойдет даже для IE ниже девятой версии, используйте атрибут filter:

.block {background-image: url(img.png); filter: alpha(opacity=30);}.

В этом случае значение opacity устанавливается в пределах от 0 до 100. Учтите, что атрибут opacity отличается от настройки прозрачности с помощью RGBA наследственностью: при использовании opacity прозрачным становится не только фон, но и все элементы внутри блока.

Всегда следите за статистикой использования браузеров по СНГ и всем остальным странам. Самая большая проблема всех верстальщиков — старые версии IE, именно они не позволяют использовать в полной мере CSS3. При верстке не забывайте пользоваться специальными сервисами, которые проверяют, поддерживает ли ваш браузер какое-либо свойство CSS. Если вы не можете установить старые версии браузеров, найдите сервис, который проверит работу сайта в разных браузерах онлайн.

Атрибут background-repeat

Как правило, если фон задан изображением, он должен повторяться по горизонтали или вертикали. Для этого и используется атрибут background-repeat. Так, фон блока, CSS которого содержит такое свойство, может иметь один из нескольких параметров:

• no-repeat — изображение появляется на странице в единственном варианте;
• repeat — фон повторяется по осям x и y;
• repeat-x — только по горизонтали;
• repeat-y — только по вертикали;
• space — фон повторяется, но если пространство заполнить не получается, то между картинками появляются пустоты;
• round — изображение масштабируется, если не получается всю область заполнить целыми картинками.

Пример использования атрибута:

body {background-repeat: no-repeat repeat} — аналогично background-repeat: repeat-y.

Использование 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>

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;
}

Как видите, свойство css сработало, блок с классом opas2 стал прозрачным и через него проглядывается фоновое изображение.

Но здесь есть один неприятный момент. Как вы могли заметить, текст потускнел, то есть он тоже стал прозрачным. Это произошло из-за того, что все дочерние элементы блока, в нашем случае – текст, унаследовали прозрачность заданную в css.

Получается, что данное css-свойство мы можем использовать для придания прозрачности блоку на странице только в том случае, если он не содержит никакого текста.

А что же делать, если нам нужно задать в css прозрачность фона для блока, но при этом сохранить читабельность содержащегося в нем текста?

Управление позицией фонового изображения

По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием единиц измерения CSS, либо используя ключевые слова:

Рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования фонового изображения</title>
<style> 
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
	<body>
		<div class = "leftTop">left top</div>
		<div class = "leftCenter">left center</div>
		<div class = "leftBottom">left bottom</div>
		<div class = "rightTop">right top</div>
		<div class = "rightCenter">right center</div>
		<div class = "rightBottom">right bottom</div>
		<div class = "centerTop">center top</div>
		<div class = "centerCenter">center center</div>
		<div class = "centerBottom">center bottom</div>
		<div class = "userPosition">20px 75%</div>
	</body>
</html>

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

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

Рис. 117 Пример позиционирования фонового изображения.

CSS opacity симбиоз

Под симбиозом я подразумеваю объединение разных стилей для разных браузеров в одном CSS правиле для получения нужного эффекта, т.е. для реализации кросс-браузерности.

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/

-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */

-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
/* CSS3 — Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

По сути, нужными являются первое и последнее правила, для IE5.5+ и браузеров понимающих CSS3 opacity, а два правила по середине явно погоды не делают, но и не очень то и мешают (сами решайте, нужны ли они вам).

Определение и применение

CSS свойство background позволяет установить необходимые свойства фона в одном объявлении (универсальное свойство). Значения могут быть указаны в любом порядке (и в любом необходимом количестве), браузер автоматически определит, какое из них соответствует необходимому свойству.

Значения следующих свойств могут быть установлены:

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

Обращаю Ваше внимание на то, что если Вы используете для фона элемента значения position и size вместе, то вы должны при этом разделять их слэшем «/» (position/size). Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

«Учебник CSS 3. Статья ‘Работа с фоном элемента в CSS’.»

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 Style
Font Size
Font Google
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 Specificity

Управление прозрачностью с помощью Opacity;

Из предыдущего примера можно увидеть, что свойство opacity всегда
оставляет за собой возможность выполнять с объектом какие-то события, на пример
выделение клики и так дальше, в целом все события, которые есть и у любого
другого объекта в целом.

И при всем этом, мы можем задать любую интенсивность для
прозрачности объекта. А значит, сделать текст или картинку полупрозрачной, или
вообще прозрачной. Да в целом нет такого элемента на сайте, с которым opacity не будет работать, я даже
попробовал видео на youtube сделать
прозрачным и у меня получилось.

Если сравнить этот пример с самым первым элементом, то можно
уверенно сказать, что прозрачность задана всем обьектам – так и есть.

Я задал прозрачность каждому, но при этом разную, например,
у текста применено opacity: 0.9; вместе
с ним возникает ощущение, будто мы сделали текст немного светлее, но цвет, как
и был стандартным черным так и остался.

Для кнопки я за дал opacity:
0.7;, а для картинки opacity: 0.5;
и это вообще заметно.

Как это можно применить на деле? Очень просто, бывало я
задаю блокам легкую прозрачность, а вот когда наведем мышку на этот блок, то с помощью
hover я задаю полную яркость, ну в
общем получается круто.