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

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

Атрибут background-repeat

Background в css (color, position, image, repeat, attachment)

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

CSS Tutorial

Нажат ли checkbox проверяем javascript

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

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

Background-image

До этого я рассказывал, что 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%

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset=utf-8" />
  <title>Пример 2</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%;
   }
   div {
    background: #FFEFD5;    
    opacity: 0.88;
    filter: alpha(Opacity=88); 
padding: 25px; 
text-align:center;
   }
  </style>
 </head>
 <body>
  <div>
   В нашем магазине вы найдете все виды цветов.
  </div>
 </body>
</html>

Создание полупрозрачного фона в 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>

Примеры: как прозрачность в html

Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5

На странице преобразуется в следующее

Пример №2. Эффекты с прозрачностью в html

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

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

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

На странице преобразуется в следующее

ПримечаниеInternet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

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

CSS:

.background {
text-align: center;
background: url(«background.jpg») top center;
padding: 120px 10px;
}
.transparent {
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 50px;
line-height: 50px;
text-transform: uppercase;
background: #000;
color: #FFF;
mix-blend-mode: multiply;
padding: 10px 20px;
display: inline-block;
/* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */
}

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

.background {

text-aligncenter;

backgroundurl(«background.jpg»)topcenter;

padding120px10px;

}

.transparent {

font-familyTahoma,sans-serif;

font-weightbold;

font-size50px;

line-height50px;

text-transformuppercase;

background#000;

color#FFF;

mix-blend-modemultiply;

padding10px20px;

displayinline-block;

/* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */

}

В итоге у нас получится это:

Градиенты

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

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

В CSS нет никаких специальных свойств для создания градиентов. Вместо них используется функция градиента для установки свойства background. Но не забудьте сначала назначить этому свойству сплошной цвет, чтобы создать резервную заливку для браузеров, которые не поддерживают градиенты (включая Internet Explorer, который поддерживает градиенты, только начиная с версии IE 10).

Существуют четыре функции градиентов, и для всех них требуется применять префиксы разработчиков браузеров. В этом разделе мы рассмотрим примеры градиентов для браузера Chrome (для которого применяется префикс -webkit-). Для поддержки браузеров Firefox и Opera нужно добавить точно такие же значения градиентов, но с префиксами -moz- и -o-.

Первой рассмотрим функцию linear-gradient(). Далее приводится одна из ее простейших форм, окрашивающая блок белым цветом вверху, который переходит в синий внизу:

Заменив значение top на left, получим линейный горизонтальный градиент. А указав для начала градиента угол блока, получим диагональный переход:

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

Наконец, вместо равномерного распределения цветов градиента можно указать позицию начала каждого цвета посредством точек остановки градиента (gradient stops), растягивая или сжимая полосы или смещая их в ту или другую сторону.

Точки остановки градиентов указываются в процентах, где 0% означает начало градиента, а 100% — окончание. Следующий пример градиента растягивает оранжево-желтую среднюю часть:

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

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

С другими примерами градиентов и двумя другими функциями для создания градиентов, не рассмотренными здесь (repeating-linear-gradient() и repeating-radial-gradient()), можно ознакомиться в блоге, посвященном браузеру Safari.

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

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

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

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

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

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

Стиль:

202122232425

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

HTML код:

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

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

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.

backgroundbackground-color

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

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

Значение	Описание
left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

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

<!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

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

1
2
3

Так выглядит фон с 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);
}

1
2
3
4
5
6
7
8
9
10
11

.rgba{

width300px;

padding30px;

marginauto;

text-aligncenter;

margin10px;

font-size18px;

color#fff;

backgroundrgba(0,0,0,0.3);

}

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

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

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Cases and Examples

2.1 Different Opacity with Hover

Opacity may very well be a great hover effect for elements of HTML. Look at the button example below:



BUTTON HOVER

.button {
	border-radius: 0.4em;
	background-color: #d17474;
	width: 10em;
	font-weight: bold;
	text-align: center;
	padding: 1em;
	color: white;
}
.button:hover {
	opacity: 0.7; 
}

Opacity now will be 30% less than the initial opacity on hover.

Button Opacity on Hover

2.2 Image Opacity Example

We can apply a nice opacity on images containing a transparent box inside. Look at the code below:

<!-- HTML SECTION  -->

<div class="image"><div class="image-text">BIRDS LIFE</div></div>

.image {
	background-image: url(image.jpg);
	background-repeat: no-repeat;
	width: 600px;
	height: 400px;
}

.image-text {
	width: 200px;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	color: white;
	padding: 1em;
	background: rgba(255,255,255,.5);  /* set background color and opacity of text box */
}

The image with a title styled with an opacity in the backround would look like this:

Opacity Title of an Image

Notice how we used the way to set color and opacity of the text box. Generally speaking, it is just the same as applying background color and opacity properties separately and giving same values, this is just to show you there is another way of how you can set these values in one single line. With RGBA, you set individual values for Red, Green and Blue colors.

Заключение

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

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

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

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

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