» »

Как сделать полупрозрачный фон на чистом CSS

Как сделать полупрозрачный фон на чистом CSS

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

Для того, чтоб прописать в стилистике CSS сайта, то здесь нужно специально заданный формат под такую палитру оттенка, который будет задаваться в rgba формаций. Где можно задать уже составляющее оттенки цвета, как Red, Green, Blue, где изначально будет прозрачен. Но здесь может быть как сильно прозрачным, так сделать ее намного меньше.

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

Рассмотрим один из примеров полупрозрачного оттенка в алом цвете.

Как пример:

Создание прозрачного фона на стилях CSS

HTML

Код
<div style="background-color: rgba(245, 35, 35, 0.5); height: 135px; width: 285px;">Здесь прозрачно красный оттенок</div>

Также можно на CSS

Создать полупрозрачный background фон на CSS

Это уже темно красный оттенок на прозрачном виде.

Код
div {
  background-color:rgba(169, 5, 5, 0.5);
}

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

Здесь хочется рассмотреть еще один вариант:

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

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

Для этого возьмем один код:

Код
<div class="limpidity">
<div class="navigation"></div>
</div>

Здесь нужно, чтобы div с класс limpidity был в прозрачном виде, но при также нужно, чтоб еще один элемент аналогичного свойство не стал аналогичным, здесь здесь все просто, а это идет добавление еще одного div, что идет эквивалентны заданному элементу.

Что после всего получится такой вид:

HTML

Код
<div class="limpidity">
<div class="transmittance"></div>
<div class="navigation"></div>
</div>

CSS

Код
.transmittance {
  opacity:0.4;
  filter:alpha(opacity=50);
  -moz-opacity:0.7;
background-color:#1b1919;
width:579px;
height:2175px;
position:absolute;
  top:0px;
  left:0px;
z-index:-1;
}

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

Демонстрация
23.08.2018 Просмотров: 250 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
waak
waak 23.08.2018 22:261
0
Не только так можно сделать прозрачным фон ещё есть и такой вариант #cad9ec80 данный цвет тоже будет прозрачным просто для такого варианта нужно знать код цвета
Kosten
Kosten 23.08.2018 22:312
0
По идее должно 6 знаков, просто на одной демонстраций так делал, с браузера брал, так через какое то время, просто все пропало, не знаю почему.
pesd0z
pesd0z 23.08.2018 23:093
+1
Хмм, не легче использовать свойство "opacity"?
Код

.c0de18 {
  background: #dbdbdb; /* Цвет фона */
  opacity: 0.1; /* Полупрозрачный фон */
  filter: alpha(Opacity=10); /* Прозрачность в IE */
  }

В новом IE кстати можно по-моему не использовать filter, но всё-же.
Код

.c0de18 {
background-color: rgba(0, 120, 201, 0.1); /* 0.1 в конце это наше значение полупрозрачности */
}


Вообще с такими простыми вещами советую пользоваться справочниками по html & css.
Рекомендую (не реклама): html5book.ru и htmlbook.ru программист не может знать всё, он должен черпать информацию как раз таки в справочниках:) Всего доброго!
pesd0z
pesd0z 23.08.2018 23:104
-1
ляя, сорри даже не смотрел код. но я его если че подробнее разобрал, без обид:)
Kosten
Kosten 23.08.2018 23:155
-1
pesd0z, все нормально, по полочкам разложено, плюс.
avatar