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

Содержание:

Что такое медиатека iCloud
Transparency using RGBA
Способ 4. Современный
CSS Advanced
Прозрачность и зазубренный текст в IE
- Способ 1 — значение transparent
- Способ 2 — цветовой режим rgba
- Способ 3 — opacity
Свойство opacity
Использование css-свойства opacity
Управление прозрачностью с помощью Opacity;
Прозрачность в CSS
Как поставить фильтр в Экселе на столбец с числами
Градиенты
CSS:
Прозрачность фона
Способ 4. Современный
More Examples
- Example
- Example
- Example
Способ 2. Не замороченный
Definition and Usage
Примеры: как прозрачность в html
- Пример №2. Эффекты с прозрачностью в html
- Пример №3. Прозрачный блок на изображении в html
Эффект прозрачности фона (HTML и CSS)
Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)
Универсальное свойство background
CSS Tutorial
Атрибут background-repeat
Как убрать прозрачность дочернего элемента?
Alternative solution: add an overlay with reduced opacity and background-color on top of the background image.

Что такое медиатека iCloud

Что же привнесла медиатека в жизнь рядовых пользователей:

Все фото и видео благодаря медиатеке iCloud можно хранить в iCloud Drive.
Пользователь может сохранять уменьшенные копии фото и оптимизированные видео, благодаря чему освобождается больше места на устройствах.
Если все девайсы переведены на медиатеку iCloud, появятся все плюсы синхронизации с облаком. То есть, медиатека будет единой для всех устройств.
Нужно приготовиться к тому, что в какой-то момент бесплатных 5 гигабайт станет недостаточно и придется пользоваться платными тарифами. Это скорее минус, чем полюс.
Медиатека становится доступной через iCloud.com в любом месте в мире.

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.

Способ 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(http://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%

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

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

CSS Advanced

Узнайте как сделать фон страницы в html документе и создавайте свои статьи наглядно читаемыми и структурированными

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS 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 object-fitCSS 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

Прозрачность и зазубренный текст в IE

С выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType
, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания. Касательно нашего случая, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст — bold
, например, двоится, могут так же появляться различные артефакты, например, в виде чёрточек, зазубренного текста). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color
, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.

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

Способ 1 — значение transparent

Если вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:

Color: transparent;

Такой текст нельзя будет увидеть на странице.

Способ 2 — цветовой режим rgba

А это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:

Background: rgb(230, 121, 156);

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

Background: rgba(0, 0, 0, 0);

В таком случае остальные 3 цифры особой роли не играют.

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

Способ 3 — opacity

Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .

В общем-то, на данный момент это все известные мне способы задания прозрачного цвета в 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-свойства opacity

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

Синтаксис свойства css:

opacity: значение;

где значение указывается в диапазоне от 0.0 (элемент полностью прозрачен) до 1.0 (элемент абсолютно не прозрачен).

Итак, для примера сделаем блок с классом fon, и для него зададим, для наглядности, фоновое изображение. В этом блоке разместим два блока с текстом opas1 и opas2, для которых зададим черный фон. После чего для второго блока зададим значение opacity равное 0.3.

Вот что получится:

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

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

HTML-код примера:

XHTML

<div class=»fon»>
<div class=»opas1″>
Блок без прозрачности
</div>
<div class=»opas2″>
Демонстрация работы свойства css opacity
</div>
<div>

1
2
3
4
5
6
7
8
9
10
11

Блок без прозрачности
</div>

Демонстрация работы свойства 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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.fon{

backgroundurl(images/opacity1.jpg);

width400px;

padding30px;

marginauto;

}

.opas1{

width300px;

padding30px;

background#000;

marginauto;

text-aligncenter;

margin10px;

font-size18px;

color#fff;

}

.opas2{

width300px;

padding30px;

background#000;

marginauto;

text-aligncenter;

opacity0.3;/* уровень прозрачности в css*/

margin10px;

font-size18px;

color#fff;

}

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

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

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

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

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

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

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

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

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

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

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

Прозрачность в CSS

Средствами CSS можно задать прозрачность двумя способами.С помощью свойства opacity или свойства rgba.

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

Синтаксис

Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

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

HTML

Добавляем стили

CSS

Но к сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); — для ИЕ версии выше 5.5-7 прозрачность реализуется с помощью фильтра Alpha DirectX. Значение задается в диапазоне от 0 до 100. Сокращенный (не рекомендуемый) вариант — filter: alpha(opacity=50);
-moz-opacity — для старых версий Mozilla (1.6 и ниже) и Firefox (до 1.6)
-khtml-opacity — для Safari 1.1 и Konqueror 3.1

CSS

Так же на IE может не работать если не указаны width(ширина) или height(высота).

RGBA

Свойство RGBA позволяет задать фоновый цвет с альфа-каналом. Альфа-канал определяет прозрачность элемента.

Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Синтаксис

Допустим, нам нужен текст с прозрачным фоном.

HTML

CSS

Отличия opacity от rgba

opacity влияет на весь блок, включая текст. Создаёт новый контекст наложения. Дочерние теги не могут быть ярче родительского элемента.

Как поставить фильтр в Экселе на столбец с числами

Градиенты

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

На многих веб-страницах градиенты симулируются фоновыми изображениями. Но технология 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 {
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); */

}

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

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

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

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

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

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

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

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

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

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

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

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:

Способ 2. Не замороченный

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

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

Пример 1

Пример 1
Текст на рисунке в формате png.

Однако такой способ не удобен по нескольким причинам:

Internet Explorer 6 не работает с такой технологией, для него нужно писать скриптовый код;
Нельзя видоизменять цвета фона в css;
Если в браузере отключена функция отображения изображений, то исчезнет.

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

Default value:	1
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.opacity=»0.5″ Try it

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

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

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

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

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

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

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

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

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

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

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

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

Рейтинг: 5 / 5

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

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

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

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

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

Универсальное свойство background

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

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

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

Давайте рассмотрим пример использования универсального свойства background:

Пример использования универсального свойства background

И так, что мы сделали в этом примере:

Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

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

Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в 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

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

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

Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность), то прописываете ему следующие характеристики, где значение прозрачности равно 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 */ }

Alternative solution: add an overlay with reduced opacity and background-color on top of the background image.

Another solution is instead of changing the opacity of the background image, you add an overlay with a semi-transparent background color on top of the background image.

The HTML markup will be the same as the previous solution. In the CSS, you can set the background-image directly in the parent element, with no opacity change.

The pseudo-element of the parent will then contain the semi-transparent background-color.

This is accomplished by setting the property using the , where the first three characters are the RGB color numbers, and the last number is the alpha or transparency setting. We’re using for the RGB color, which translates to black.

An alpha value can range from (0% opacity) to (100% opacity). So our value of will result in an overlay of 25% opacity.

Here’s what that will look like in the code:

The result will look like this:

And here’s the Codepen for this overlay solution!

Both solutions have a very similar-looking result. The first solution has a background image set at 75% opacity. And the second solution adds a black overlay at 25% opacity. So they’re not quite the same, but they are similar.

The overlay solution is also handy if you want to add a toned color to the background image. Here’s what that would look like if we set the overlay to :