Прозрачность и полупрозрачность в css: подробное руководство

Содержание:

Эффект прозрачности фона (HTML и CSS)
Пример использования
Пример c использованием фона для текста:
- - - - HTML данного варианта:
      - CSS данного варианта:
Transparency using RGBA
Свойство CSS opacity
Эффект прозрачности фона (HTML и CSS)
Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)
Шестнадцатеричные обозначения
Создаем прозрачный фон для картинки онлайн
- Способ 1: LunaPic
- Способ 2: PhotoScissors
- Способ 3: Remove.bg
Прозрачность фона
Цвет фона блока
Прозрачность при наведении
Цвет фона CSS
Рассмотрим пример
Прозрачность фона
Объединение свойств
Полная прозрачность с помощью visibility: hidden
Область заполнения фона
PNG в качестве фона
Параметры фонового изображения
- background-attachment: прикрепление фона
- background-repeat: повторение фона
- background-position: положение фона
- Сочетание свойств
Атрибут background-color
Способ 4. Современный

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

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

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

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

opacity

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

HTML 5 CSS 3 IE 9

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>opacity</title> <style> body { background: url(images/cat.jpg); } div { opacity: 0.6; background: #fc0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <div>Создание и продвижение сайтов в интернете</div> </body> </html>

RGBA

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

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

Полупрозрачный фон

HTML 5 CSS 3 IE 9

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>rgba</title> <style> body { background: url(images/cat.jpg); } div { background: rgba(0, 170, 238, 0.4); /* Цвет фона */ color: #fff; /* Цвет текста */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <div>Создание и продвижение сайтов в интернете.</div> </body> </html>

Значение непрозрачности для фона установлено 90% — полупрозрачный фон и непрозрачный текст.

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

Пример использования

Подробное руководство по созданию карты сайта

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования универсального свойства background</title>
<style> 
.primer {
background:#00FF00 url('/images/smile.png') repeat-x center; /* свойства фона для элемента */
height:150px; /* высота элемента */
}
</style>
</head>
	<body>
		<div class = "primer"></div>
	</body>
</html>

В этом примере с использованиме CSS свойства height мы задали для блочного элемента <div> высоту 150 пикселей и с использованием универсального CSS свойства background указали следующие значения для его фона:

зеленый цвет заднего фона в шестнадцатерично системе указания цвета — #00FF00 (background-color).
путь к изображению, которое используется в качестве заднего фона (smile.png) (background-image).
указали, что наше изображение повторяется только по оси X (background-repeat).
указали, что наше изображение позиционируется по центру (background-position).

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

CSS свойства

Пример c использованием фона для текста:

Диаграмма ганта в wrike: подробное руководство по созданию

Еще один вариант сделать текст прозрачным — это наложить на него такой же фон, как и в блоке под ним (см.: Background для текста).

Прозрачный текст

HTML данного варианта:

<div class=»background»>
<div class=»background-text»><span>Прозрачный текст</span></div>
</div>

1
2
3

<div class=»background-text»><span>Прозрачный текст</span></div>

</div>

CSS данного варианта:

.background {
text-align: center;
padding: 120px 10px;
background: url(«background.jpg») top center;
}
.background-text {
padding: 10px 20px;
background: #BFE2FF;
display: inline-block;
}
.background-text span {
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 48px;
line-height: 48px;
text-transform: uppercase;
background: url(«background.jpg») top -130px center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

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

.background {

text-aligncenter;

padding120px10px;

backgroundurl(«background.jpg»)topcenter;

}

.background-text {

padding10px20px;

background#BFE2FF;

displayinline-block;

}

.background-text span {

font-familyTahoma,sans-serif;

font-weightbold;

font-size48px;

line-height48px;

text-transformuppercase;

backgroundurl(«background.jpg»)top-130pxcenter;

-webkit-background-cliptext;

-webkit-text-fill-colortransparent;

}

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

А минус в том, что текст с заданным ему фоном должен умещаться в 1 строку.

Transparency using RGBA

Как стать хорошим копирайтером: самое подробное руководство для начинающих

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values.
The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB,
you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The
alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Свойство CSS opacity

(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; } Попробовать »

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

Рейтинг: 5 / 5

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

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

opacity

HTML 5 CSS 3 IE 9

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>opacity</title>
<style>
body {
background: url(images/cat.jpg);
}
div {
opacity: 0.6;
background: #fc0; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>Создание и продвижение сайтов в интернете</div>
</body>
</html>

RGBA

HTML 5 CSS 3 IE 9

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>rgba</title>
<style>
body { background: url(images/cat.jpg); }
div {
background: rgba(0, 170, 238, 0.4); /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>Создание и продвижение сайтов в интернете.</div>
</body>
</html>

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

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

Шестнадцатеричные обозначения

Шестнадцать цветов — это мало, если учесть, что большинство мониторов могут отображать шестнадцать миллионов цветов. Но представьте, если бы нужно было задать название каждому из шестнадцати миллионов оттенков …

К счастью, в CSS предусмотрено несколько способов выбора цвета. Первый способ — шестнадцатеричное значение. Вот как выглядит название цвета в шестнадцатеричном формате: #FF5A28. Это комбинация букв и цифр, которые указывают цвет.

Всегда нужно начинать с указания символа хэша (#), за которым следует шесть букв или цифр от до 9 и от A до F.

Эти буквы или цифры работают парами. Первые две цифры указывают количество красного, две следующие — зеленого, а две последние — голубого. Смешивая эти значения (которые являются компонентами Red-Green-Blue в цвете), можно получить любой цвет.

Таким образом, #000000 соответствует черному цвету, а #FFFFFF — белому.

Некоторые графические программы, такие как Photoshop, Gimp и Paint.NET, позволяют указывать цвета в шестнадцатеричном формате.

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

p
{
color: #FFFFFF;
}

При этом допускается сокращенная запись: можно указать цвет с помощью только трех символов. Например: #FA3 эквивалентно #FFAA33.

Создаем прозрачный фон для картинки онлайн

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

Способ 1: LunaPic

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

Запустите главную страницу интернет-ресурса LunaPic и переходите в обозреватель для выбора рисунка.

Выделите картинку и нажмите на «Открыть».

Вы будете автоматически перенаправлены в редактор. Здесь во вкладке «Edit» следует выбрать пункт «Transparent Background».

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

Произойдет автоматическое очищение рисунка от заднего плана.

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

Через несколько секунд вы получите результат.

Можете сразу же переходить к сохранению.

Оно будет загружено на ПК в формате PNG.

На этом работа с сервисом LunaPic завершена. Благодаря приведенной инструкции вы сможете без проблем сделать фон прозрачным. Единственным недостатком сервиса является его корректная работа только с теми рисунками, где задний план заполняет преимущественно один цвет.

Способ 2: PhotoScissors

Давайте разберемся с сайтом PhotoScissors. Здесь нет такой проблемы, что хорошая обработка будет получена только с определенными картинками, поскольку вы сами задаете область, которая вырезается. Осуществляется процесс обработки так:

Находясь на главной странице онлайн-сервиса PhotoScissors, переходите к добавлению необходимой фотографии.

В обозревателе выделите объект и откройте его.

Ознакомьтесь с инструкцией по использованию и приступайте к редактированию.

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

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

В окне предпросмотра справа вы сразу будете наблюдать изменения вашего редактирования.

С помощью специальных инструментов вы можете отменять действия или использовать ластик.

Переместитесь во вторую вкладку на панели справа.

Здесь вы можете выбрать тип фона. Убедитесь в том, что активирован прозрачный.

Приступайте к сохранению изображения.

Объект будет скачана на компьютер в формате PNG.

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

Способ 3: Remove.bg

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

Перейдите на главную страницу Remove.bg и приступайте к загрузке картинки.

В случае если вы указали вариант загрузки с компьютера, выберите снимок и кликните на «Открыть».

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

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

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

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

Есть два возможных способа сделать элемент прозрачным: свойство , описанное выше, и указание цвета фона в 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;  }

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

Цвет фона блока

Свойство background-color устанавливает цвет фона. Значением этого свойства
является цвет, указаннный одним из способов, существующих в CSS. Кроме того, оно
принимает такие значения:

background-color: transparent — прозрачный фон (по умолчанию)

background-color: inherit — значение принимается от родительского элемента

Значение transparent используется в CSS, когда нужно вернуть прозрачный фон блоку,
если ранее он уже был изменён.

Создадим блок, зададим ему размеры и установим цвет фона.

Стиль:

789101112

#div1
  {
  width: 300px;
  height: 50px;
  background-color: Green;
  }

HTML код:

16	<div id="div1">Блок с фоном</div>

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

Псевдо-класс :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> Попробовать »

Цвет фона CSS

Не знаете как изменить цвет фона в html? Чтобы указать html цвет фона страницы сайта, используйте свойство background-color CSS. Оно используется так же, как и свойство color, другими словами, можно ввести название цвета, его шестнадцатеричное значение или RGB.

Чтобы указать цвета для фона веб-страницы, необходимо работать с html-тегом

<body>

Рассмотрите приведенный ниже код CSS:

/ * Мы работаем с тегом body, и соответственно со ВСЕЙ страницей * /
body
{
background-color: black; /* Фон страницы будет черным */
color: white; /* Текст страницы будет белым */
}

Результат работы этого кода простой html страницы с фоном:

Белый текст на черном фоне

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

Создаём файл index.html

<html> <head> <title> Название странички </title>

.square { width: 100px; height: 100px; background: black; } </style>

</head> <body> <h1>Полупрозрачность элемента</h1> Делаем изображение полупрозрачным при наведении!

</body> </html>

ДемонстрацияСкачать исходники

Спасибо за внимание!

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

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

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body {
        background: white url('img_tree.png') no-repeat fixed right top;
        padding-right: 200px;
      }
    </style>
  </head>

  <body>

    <h1>Объединим свойства background в одно объявление!</h1>
    <p>Объединение нескольких свойств в одно может значительно сократить ваш CSS-код, 
    при этом никаких изменений во внешнем виде страницы не произойдет. Свойства, которые 
    возможно объединять в одно объявление, вы можете посмотреть в нашем справочнике по CSS.
	</p>

  </body>
</html>

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

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

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

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

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

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

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

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

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

Область заполнения фона

Фон может зополнять разные области блока. Область задаётся с помощью свойства
background-clip. Оно принимает следующие значения:

background-clip: border-box — весь блок вместе с рамкой (по умолчанию)

background-clip: padding-box — весь блок без рамки

background-clip: content-box — фон заполняет только область содержимого

border-box

padding-box

content-box

При значении border-box заполняются только прозрачные части рамки. Если
рамка сплошная и непрозрачная, то за ней фон не отображается.

Добавим на страницу блок, зададим ему рамку и внутренние отступы и установим фон, заполняющий только
содержимое блока:

Стиль:

13141516171819

#div2
  {
  background-clip: content-box;
  background-color: Green;
  border: 1px solid Red
  padding: 10px;
  }

HTML код:

24	<div id="div2">Фон заполняет только контент</div>

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

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

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

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

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

XHTML 1.0CSS 2.1IECrOpSaFx

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

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

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

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

Параметры фонового изображения

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

background-attachment: прикрепление фона

Свойство CSS background-attachment используется для «закрепления» фона. Полученный эффект позволяет сделать так, чтобы фон «прокручивался» вместе с текстом. Доступны два значения:

fixed: фоновое изображение остается закрепленным;
scroll: фоновое изображение прокручивается вместе с текстом (значение по умолчанию).

body
{
background-image: url("snow.png");
background-attachment: fixed; /* Фон остается закрепленным */
}

background-repeat: повторение фона

По умолчанию фоновое изображение повторяется в виде мозаики (таким образом, фон html-страницы распространяется на весь экран). Вы можете изменить это с помощью свойства background-repeat:

no-repeat: фон не будет повторяться. Изображение будет размещено на странице в одном экземпляре.
repeat-x: изображение будет повторяться только в первой строке, горизонтально.
repeat-y: изображение будет повторяться только в первом столбце по вертикали.
repeat: фон будет повторяться в виде мозаики (значение по умолчанию).

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

body
{
background-image: url("sun.png");
background-repeat: no-repeat;
}

background-position: положение фона

Также можно указать позицию фонового изображения с помощью background-position. Это свойство полезно только в комбинации с background-repeat: no-repeat; (фон, который не повторяется).

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

background-position: 30px 50px;

… фон будет сдвинут на 30 пикселей левее и 50 пикселей выше. Также можно использовать следующие значения:

top: вверху;
bottom: внизу;
left: слева;
center: по центру;
right: справа.

Их можно комбинировать. Например, чтобы разместить фоновое изображение в правом верхнем углу, нужно ввести:

background-position: top right;

Если я хочу отображать солнце в качестве фонового изображения (следующий рисунок), только один раз (no-repeat), всегда видимым (fixed) и расположенным в правом верхнем углу (top right), то следует написать следующий код фона html-страницы:

body
{
background-image: url("sun.png");
background-attachment: fixed; /* Фон остается  зафиксированным */
background-repeat: no-repeat; /* Фон не будет повторяться */
background-position: top right; /* Фон будет отображаться в правом верхнем углу */
}

Солнце в качестве фонового изображения в правом верхнем углу

Сочетание свойств

Если вы применяете к фону много свойств, то можно использовать своего рода «супер-свойство», называемое background. Его значение может сочетать в себе несколько ранее рассмотренных свойств: background-image, background -repeat, background-attachment и background-position.

Таким образом, можно написать:

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

Это первое «супер-свойство», которое я вам показываю, но будут и другие. Вы должны знать следующее:

Порядок значений не важен. Можно комбинировать значения в любом порядке.
Не нужно вводить все значения. Поэтому, если не хотите вводить fixed, можно удалить его.

Атрибут 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).

Способ 4. Современный

До этого я рассказывал, что RGB – это одна из популярных цветовых моделей, где R отвечает за все оттенки красного, G – оттенки зеленого и B – оттенки синего.

В случае с параметром css переменная A отвечает за альфа-канал, который в свою очередь отвечает за прозрачность.

rgba (r, g, b, a) поддерживается начиная с:

10 версии Opera;
Internet Explorer 9;
Safari 3.2;
3 версии Firefox.

Хочу отметить интересный факт! Горячо любимый Internet Explorer 7 выдает ошибку при сочетании свойства background-color с названием цветов (background-color: gold). Поэтому стоит использовать только:

А теперь пример.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset=utf-8" />
  <title>Пример 3</title>
  <style type="text/css">
   BODY {
    background: url(https://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) no-repeat; 
    background-size:100%;
   }
   .block{
     background-color: rgba(255, 228, 196, 0.88);    
    padding: 25px; 
    text-align:center;
   }
  </style>
 </head>
 <body>
  <div class="block">
   В нашем магазине вы найдете все виды цветов.
  </div>
 </body>
</html>

Обратите внимание, что текстовый контент блока полностью виден (100% черный), в то время как фону задан альфа-канал равный 0,88, т.е. 88%

На этом публикация подошла к концу. Подписывайтесь на мой блог и не забывайте приглашать друзей. Желаю удачи в изучении веб-языков! Пока-пока!

Прочитано: 799 раз