Как сделать полупрозрачный фон на чистом CSS
 | |
| Все больше дизайн выстраивают на прозрачном фоне, в этом материале рассмотрим о том, как создать его и с последствием добавлением на сайт. Нужно изначально знать о небольшой проблеме, которая заключается в том, где при добавлении прозрачного или полу прозрачного фона и его использование в формате PNG, когда форматирование происходит в самом изображение профессиональными программами, такими как фотошоп. Если брать палитру цвета, то здесь совершенно другая ситуация, где можно выставлять любой оттенок, что будет прозрачным фоном. Для того, чтоб прописать в стилистике CSS сайта, то здесь нужно специально заданный формат под такую палитру оттенка, который будет задаваться в rgba формаций. Где можно задать уже составляющее оттенки цвета, как Red, Green, Blue, где изначально будет прозрачен. Но здесь может быть как сильно прозрачным, так сделать ее намного меньше. Здесь палитра цвета будет состоять из составляющие численности от 0 до 255, где сама прозрачность от нуля до одного. Думаю многие согласятся, что нужна будет такая палитра цвета, что просто не выставить ее, что нет такой, только при подключении прозрачности можно настроить этот оригинальный оттенок. Рассмотрим один из примеров полупрозрачного оттенка в алом цвете. Как пример:  HTML Код <div style="background-color: rgba(245, 35, 35, 0.5); height: 135px; width: 285px;">Здесь прозрачно красный оттенок</div> Также можно на 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; } Здесь можно ставить точку, так как получили прозрачный фон, который изначально создавали, но и безусловно привычный элемент. Где такая вариация по применению будет более удобным. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
