Помогите с <div> очень горит.

n_drey · March 29, 2009

Добрый день ! Существует задача создать такую конструкцию:

Слой с полупрозрачным бекграундом (без использования картинок #CCC). Внутри него существует ещё один слой который должен находится перед этим слоем и не иметь прозрачности и масштабироваться. Как я не курил форум так и не смог данное реальзивать. С ДИВ имею дело мало, во терь понадобилось. Помогите плиз.

Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>z-index</title>
  <style type="text/css">

   #layer1, #layer2 {
   position: relative;
   width: 900px;

   }

   #layer1 {
	padding: 5px;
	z-index: 1;
   background: #ccc;
   opacity: 0.5;
   }

   #layer2 {

	z-index 2:  
	}


  </style>
 </head>
 <body>
 <div id="layer1">Слой 1
 <div id="layer2">Пример примерПример примерПример примерПример примерПример примерПример пример</div>
  </div>
</div>
 </body>
</html>

Когда меняю opacity у #layer1 то меняется прозрачность всего блока.но мне надо чтоб поменялась тока прозоачность бекграунда. Поправьте меня пожалуйста. Спасибо !

Edited March 29, 2009 by n_drey

n_drey · March 29, 2009

Жаль что никто не отвечает - отвечк сам себе.

Не знаю на сколько это правильно, но решил проблему за счёт прозрачных PNG картинок, получилось в принципе неплохо.

На всякий слуачай вот код:

 body {
	background: url(BK-209.jpg) fixed no-repeat;
	}
.container {
	margin-top: 50px;
	width: 1000px;
	margin-left: auto; 
	margin-right: auto;
	}
#d1 {
	height: 13px;
	width: 13px;
	background: url(t-l.png) top left no-repeat;
	float: left;
	}

#d2 {
	height: 13px;
	width: 900px;
	background: url(bgt.png);
	float: left;
	border-top: 1px solid;
	}

#d3 {
	height: 13px;
	width: 13px;
	background: url(t-r.png);
	float: left;
	}

#d4 {
	height: 13px;
	width: 13px;
	background: url(b-l.png);
	float: left;
	}

#d5 {
	height: 13px;
	width: 900px;
	background: url(bgt.png);
	float: left;
	}

#d6 {
	height: 13px;
	width: 13px;
	background: url(b-r.png);
	float: left;
	}

#cnt {
	padding: 10px;
	width: 906px;
	background: url(bgt.png);
	clear: both;
	}
  </style>
  </head>

  <body>
 <div class="container">
 <div id="d1"></div><div id="d2"></div><div id="d3"></div>
 <div id="cnt">
Здесь содержимое.
 </div>
 <div id="d4"></div><div id="d5"></div><div id="d6"></div>
	</div>


  </body>
</html>

Azadi · April 12, 2009

Советую почитать http://habrahabr.ru/blogs/webdev/50996/

JIucky · April 13, 2009

проверьте закрывающие теги, в вашем коде их почему то 3))

а так все должно работать

Sign In

Помогите с <div> очень горит.

Question

n_drey

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

n_drey

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

JIucky

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information