Создание прозрачного фона в html и css (эффекты opacity и rgba)

Задание фона в RGBA

Избежать этой проблемы мы сможем в том случае, если откажемся от использования opacity и зададим значение для css-свойства background в формате RGBA.

Формат RGBA дает нам возможность задать значение цвета, используя значение красного, зеленого, а так же синего цветов в десятичном виде, а так же, позволяет задать прозрачность при помощи использования альфа-канала. Уровень альфа-канала задается в интервале от 0 до 1. То есть, так же как и в css-свойстве opacity.
Например так:
background:rgba(255,255,255,0.6);

Для наглядности добавим в блок с фоном еще один элемент с текстом, для которого зададим в css фон в формате RGBA с уровнем прозрачности 0.3.

Вот что у нас получилось:

Блок без прозрачности

Демонстрация работы css-свойства opacity

Так выглядит фон с RGBA

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

XHTML

<div class=»rgba»>
Так выглядит фон с RGBA
</div>

В css-файл я прописала следующие свойства для соответствующего класса:

CSS

.rgba{
width: 300px;
padding:30px;
margin:auto;
text-align:center;
margin:10px;
font-size:18px;
color:#fff;
background:rgba(0,0,0,0.3);
}

На этом у меня сегодня все. Используя описанные в данной статье возможности CSS3, вы сможете задать любой уровень прозрачности с помощью css для нужного блока, что поможет вам добиться наиболее подходящего внешнего вида для своего сайта. А я надеюсь, что мне удалось раскрыть тему, и у вас не возникнет сложностей с применением данных приемов работы.

С уважением Юлия Гусарь

Полная прозрачность с помощью visibility: hidden

Вот давай представим есть у нас следующий случай, когда нужно просто сделать объект полностью прозрачным, но при этом сохранить за собой место?

Для таких случаев вполне уместно использовать visibility: hidden

Как мы видим блок полностью исчез, но сразу возникает вопрос, а чем этот способ отличается от display: none или opacity: 0;

В целом этому есть очень внятное объяснение. Все они делают элементы невидимыми, но отличаются тем, занимают ли после применения место и использует ли они клики.

Вот к примеру, если вам нужно сделать этот блок полностью прозрачным, и при этом чтобы пользователь не имел возможности управлять объектами, которые находятся внутри, то ь visibility: hidden то что тебе нужно. Если это сделать с помощью display: none; то объект на который мы применили его, пропадет полностью будто бы мы удалили и html (при просмотре кода, сам код останется на месте).

А вот если вы решите сделать объект opacity: 0, пусть все и пропадет у пользователя из виду, но элементы будут активными, то есть текст можно будет выделить, а кнопки нажать, а картинку сохранить. Вот как это выглядит:

Есть разница правда?

Способ 3. Пропиаренный

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

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

Во-вторых, Internet Explorer опять «воротит носом» и вплоть до 8 версии не функционирует с opacity
.

Для решения этой проблемы используется filter:
alpha (Opacity=значение)
.

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

Пример 2
В нашем магазине вы найдете все виды цветов.

Как сделать изображение фоном страницы в HTML

Свойство, используемое для указания фонового изображения (в каком-то смысле его можно назвать тегом фона html-страницы) — background-image. В качестве значения необходимо указать url(«nom_de_l_image.png»). Например:

body
{
background-image: url("snow.png");
}

В результате мы получим:

Фоновое изображение страницы

Адрес, указывающий местоположение фонового изображения, может быть записан как абсолютный адрес (http: // …) или как относительный (fond.png).

Будьте внимательны при указании относительных адресов в файле CSS. Адрес изображения должен быть указан относительно файла .css, а не относительно файла .html. Чтобы упростить ситуацию, советую размещать фоновое изображение в той же папке, что и файл .css.

Создание полупрозрачного фона в CSS

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

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

Пример создания полупрозрачного блока:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>opacity</title>
  <style>
   body {
    background: url("http://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg");
    background-size: 10% auto;
   }
   div {
	 opacity: 0.7;
 	 background: #717ceb; /* Цвет фона */
 	 padding: 20px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
   <div>Так выглядит полупрозрачный блок.</div>
 </body>
</html>

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>rgba</title>
  <style>
   body { 
  background: url("http://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg");
  background-size: 20% auto;
}
   div {
    background: rgba(60, 150, 250, 0.7); /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 20px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>Прозрачный фон блока и непрозрачный текст.</div>
 </body>
</html>

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

По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя 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 Пример позиционирования фонового изображения.

RGBA

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

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

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter, но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.

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

HTML5CSS3IECrOpSaFx

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

Рис. 6. Полупрозрачный фон с непрозрачным текстом

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

Решается это заменой свойства background-color на background.

Однако здесь есть один нюанс. Валидатор CSS «ругается» на background, если ему задать значение в формате RGBA. Но при этом корректно относится к background-color. В общем, как всегда, приходится выбирать между браузерами и валидностью.

Как убрать прозрачность дочернего элемента?

Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность), то прописываете ему следующие характеристики, где значение прозрачности равно 1 или 100:

Код CSS

filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; Не забываем указывать все 4 свойства, так как в противном случае действие будет не кроссбраузерно, то есть будет работать не во всех браузерах.

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

.opacity :hover { filter:alpha(opacity=50);  /*  для IE 5.5+ */ -moz-opacity:0.5;  /* для Mozilla 1.6 и ниже */ -khtml-opacity:0.5;  /* для Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */ }

Фон в виде картинки

В CSS есть возможность использовать в качестве фона картинку. Для этого есть свойство
background-image. Значением этого свойства является путь к файлу картинки. Он
указывается так:

background-image: url(«путь к файлу»);

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

Добавим блок с размерами 400 на 250, чуть меньше, чем изображение. И установим фон в виде картинки:

Стиль:

#div3
  {
  width: 400px;
  height: 250px;
  background-image: url("image.jpg");
  }

HTML код:

<div id="div3"></div>

Не забывайте, что так устанавливается именно фон блока. На нём можно разместить контент.

Свойство 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.

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

Начиная с CSS3, можно указывать для элемента несколько фоновых изображений. Для этого разделите их объявления запятой:

body
{
background: url("sun.png") fixed no-repeat top right, url("snow.png") fixed;
}

Первое изображение из этого списка будет помещено поверх других (рисунок, приведенный ниже). Порядок объявления изображений имеет значение: если вы поменяете местами солнце и снег в приведенном выше коде CSS, то больше не увидите солнца.

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

Несколько фоновых изображений работают во всех браузерах кроме устаревших версий Internet Explorer, который распознает эту функцию, только начиная с версии 9 (IE9).

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

Результат примера с RGBA:

Второй скриншот намного лучше смотрится, чем первый.

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

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

Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3, реализовывался он чисто в графических программах.

Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer, тогда добавляйте свойство filter и не забудьте закомментировать, чтобы не пострадала валидность кода.

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-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 возможно задать значения для нескольких изображений, если перечислять параметры через запятую.

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

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

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

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

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

XHTML 1.0CSS 2.1IECrOpSaFx

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

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

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

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

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)

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

Задаем прозрачность у css background

Итак, все это делается очень просто благодаря такому формату записи цвета, как rgba . Если вы работаете с графическими редакторами, то наверняка знаете, что цветовой режим rgb расшифровывается так: доля красного цвета (red), доля зеленого (green) и синего (blue). Так вот, rgba практически тоже самое, только добавляется еще один параметр – прозрачность. Записывается так:

Background-color: rgba(173, 57, 22, 0.5)

Сначала мы явно указываем, что задаем цвет в режиме rgba. Потом указываем значения насыщенности трех основных цветов от 0 до 255, где 255 – наибольшая насыщенность. Четвертый параметр это и есть наша прозрачность. Здесь пишется значение от 0 до единицы. 1 – полностью непрозрачный элемент, а 0 – полностью прозрачный. Соответственно, если выставить 0, то фонового цвета не будет видно вообще.

Теперь вы знаете, как в css у свойства background задать прозрачность. Для этого нужно использовать цветовой режим rgba. Есть еще свойство opacity , но оно применяется ко всему элементу в целом. То есть при применении opacity прозрачность может примениться и к тексту, что сделает его нечитаемым.

Прозрачный фон на примере

Преимущества полупрозрачного фона легко показать на примере. Например, у нас есть общий фон страницы. Вот так бы выглядел блок, если бы ему был задан сплошной черный цвет:

А теперь зададим этот же черный цвет блоку, но укажем его с помощью цветового формата rgba, указав последнее значение в 0.7, например. Получится так:
Теперь фон блока просвечивается и через него видно фоновую картинку. Данная картинка и фон приведены лишь для примера. Как вы понимаете, в css background прозрачность может пригодиться, когда вам надо, чтобы фон вложенного элемента просвечивался, не закрывая другие фоны, расположенные в других слоях.

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

Доброго времени суток, гики веб-разработки, а также ее новички. Для тех, кто не следит за трендами IT-области, а точнее за веб-модой, я хочу торжественно сообщить, что эта публикация на тему: «Как сделать прозрачный блок css инструментами» вам как раз кстати. Ведь в текущем 2016 году внедрение в онлайн-сервисы различных прозрачных объектов считается стильным ходом.

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

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

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

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

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

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

XHTML 1.0CSS 2.1IECrOpSaFx

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

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

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

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

Тени

Спецификация CSS3 определяет два новых типа теней: блочные тени (box shadows) и текстовые тени (text shadows). Блочные тени обычно более полезны и имеют более высокий уровень поддержки, в то время как текстовые тени не работают ни в одной из версий Internet Explorer. Блочную тень можно использовать для создания прямоугольной тени позади любого блока элемента <div> (но не забудьте при этом о рамке, чтобы он продолжал выглядеть как блок). Тени могут даже следовать контурам блоков со скругленными углами:

Рассматриваемые тени создаются посредством свойств box-shadow и text-shadow. Далее приведен пример создания базовой блочной тени:

Первые два значения свойства box-shadow устанавливают горизонтальное и вертикальное смещения тени от исходного объекта. Положительные значения смещают тень вниз и вправо, отрицательные — вверх и влево. Следующее значение определяет размер размытия (blur, в данном примере 10 пикселов), которое увеличивает расплывчатость тени. Последнее значение определяет цвет тени. Если под блоком находится какое-либо содержимое, подумайте об использовании функции rgba(), чтобы сделать тень полупрозрачной.

Для более тонкой настройки тени в свойство box-shadow можно добавить два значения. Чтобы установить ширину (spread) тени — подсвойство, которое расширяет тень, утолщая ее сплошную часть между размытыми краями, добавляется значение между значениями размытия и цвета:

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

Свойство text-shadow требует подобного набора значений, но в другом порядке. Сначала указывается цвет, за ним следует горизонтальное и вертикальное смещения, а потом размытие:

Иконка соцсети без текста

Почти на любом сайте есть блок со ссылками на Facebook, «ВКонтакте», Instagram и другие соцсети:

Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, — нужно использовать CSS.

Здесь есть пара нюансов:

1. Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).
2. Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка — строчный элемент (его размер не изменить с помощью свойств width и height).

Обойдём эти ограничения.

Сперва напишем простую разметку — список ссылок. Классы сделаем по БЭМ, чтобы наш компонент было удобно стилизовать и использовать повторно.

Начнём, конечно, с HTML-кода:

Далее — CSS:

• Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту — и это уже сработает.
• Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.
• А вот фоновые изображения у нас разные — их мы задаём в разных классах.

Правильное сохранение.

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

Белый задний вид остается в формате GEPG. Поэтому лучше сохранять либо в PNG, либо в GIF. Я больше предпочтение отдаю PNG.

Для сохранения результата переходим в верхнюю строку. Нажимаем на «Файл». После этого перед нами появится список функций, выбираем «Сохранить как…». Далее перед нами откроется окно, в котором можно придумать какое-либо уникальное имя для файла и тип.

Помним, что тип мы выбираем либо PNG, либо GIF. Я выбрал первый вариант.

И также в этом окне вы можете выбрать место для хранения изображения.

Заключение

Мы изменяем цвет текста с помощью свойства color, а цвет фона — с помощью background-color. Также его можно использовать как способ растянуть фон на всю html-страницу.

Можно указать цвет, введя его имя (например, black), значение в шестнадцатеричном формате (#FFC8D3) или указав код RGB (rgb(250,25,118)).

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

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

Данная публикация является переводом статьи «Color and background» , подготовленная редакцией проекта.