857 Использование CSS дарит множество возможностей для совершенствования веб-ресурсов, одним из наиболее популярных свойств, которое можно создать при помощи каскадной таблицы стилей, является прозрачность фона. Многие вебмастера отдают этой «фишке» предпочтение, однако не все знают, как выполнить это правильно.
Известно, что для того, чтобы сделать прозрачный фон на CSS необходимо добавить свойство opacity 0.8. Однако, внеся подобную информацию в элемент с наличием других блоков, прозрачность приобретут все составляющие страницы, в том числе и картинки, и даже сам текст. Каким будет выход?
На самом деле задача легко решается. Возьмем следующий код:
|
1 2 3 |
<div class="fon"> <div class="menu"></div> </div> |
Если мы хотим, чтобы div с классом fon стал прозрачным, при этом мы также желаем, чтобы другой элемент данное свойство не приобрел, мы просто добавляем еще один div, эквивалентный этому элементу. После действий код принимает вид:
|
1 2 3 4 |
<div class="fon"> <div class="prozrachnost"></div> <div class="menu"></div> </div> |
Далее в CSS пишем код, указывая необходимые свойства для прозрачности, к примеру:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.prozrachnost { opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.5; background-color:#000000; width:340px; height:1500px; position:absolute; top:0px; left:0px; z-index:-1; } |
На этом эксперимент заканчивается, а мы получаем прозрачный фон и привычные элементы. Такой вариант применения прозрачности, пожалуй, наиболее удобный, поэтому пользуйтесь на здоровье!
