Блог старого компьютера

Блог старого компьютера


Главная html & css Как сделать полупрозрачный фон у блока (3 способа)

Как сделать полупрозрачный фон у блока (3 способа)

24.01.2013 03:02 Администратор html & css
Печать PDF

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

Способ №1

Этот способ думаю знают все, для его реализации используем полупрозрачную png картинку к примеру 1 пиксель на 1 пиксель, и множим ее фоне блока. Полупрозрачное изображение можно сделать в любом современном графическом редакторе. Почему именно png, а не jpg или gif? Jpg по своей сути не поддерживает вообще прозрачность и при сохранении в данный формат делает все прозрачные части белыми. Gif - поддерживает прозрачность, но не поддерживает полупрозрачность. А вот png собирает в себе все нужные нам свойства.

Пример полупрозрачного фона блока:

 <style>
.block{
background: url('img/translucent.png') repeat;
width:200px;
height:200px;
}
</style>

<div class="block"></div>

 Способ № 2

Второй способ базируется на использовании css свойства opacity которое не является кросбраузерным, но проблема решается путем использования других аналогичных свойств который непосредственно поддерживает динозавр. К примеру для ie6 нужно будет использовать css свойство которое использует альфа фильтры и выглядит вот так filter: alpha(opacity=80); Число 80 в данном случае является процентным соотношением. Для старых версий Mozilla Firefox можно использовать свойство -moz-opacity: 0.8; тут как и в свойстве opacity непрозрачный блок имеет кофициент единицу, а для прозрачности задаем его десятичнное значени (к примеру 0.8 будет означать 80% ).

Пример полупрозрачного фона блока 2:

<style>
.block{
opacity:0.8;
background: white;
width:200px;
height:200px;
}
</style>

<div class="block"></div>

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

Способ № 3

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

Пример полупрозрачного фона блока 3:

<style>
.block{
background: rgba(255, 255, 255, 0.8);
width:200px;
height:200px;
}
</style>

<div class="block"></div>

 Вот сообственно и все, мне лично мил 3 способ, он довольно прост, и не нужно обращатся к серверу для того чтоб получить картинку. Вам решать какой способ выбрать. Если вы знаете и другие способы напишите.

Комментарии  

 
0 #1 fixbob 07.07.2014 16:15
Спасибо :-) Хорошая статья - все по делу
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?