Ненаследуемая прозрачность - как?

Тема в разделе "Другие языки", создана пользователем diavolic, 4 фев 2011.

Модераторы: Цукер
  1. diavolic

    diavolic

    Регистр.:
    17 мар 2010
    Сообщения:
    522
    Симпатии:
    102
    имеется:

    css:
    Код:
     
    			* {margin: 0; padding: 0;}  
     
    			body {
     
    				border: 1px solid white;  
     
    			}
     
    			#overlay{
     
    			display: none;
     
    			position:absolute;
     
    			top: 0;
     
    			left: 0;
     
    			right: 0;
     
    			bottom: 0;
     
    			width: 100%;
     
    			height: 100%;
     
    			z-index: 15000;
     
    			background-color: #aaaaaa;
     
    			-moz-opacity: 0.75;
     
    			filter: alpha(opacity=75); 
     
    			} 
     
    			#overlay .modal_w_container {
     
    			background-image:url(white.png);
    
    			background-color: white;
     
    			margin-left: auto;
    
    			margin-right: auto;
    
    			width: 300px; 
     
    			}
    
    
    
    скрипт для вызова:

    Код:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script> 
    <script language="javascript">
    			function modal() {
     
    				jQuery('#overlay').height(jQuery(document).height());	
    
    				jQuery('#overlay').show();
     
    				var martop = jQuery(window).scrollTop();
     
    				jQuery('.modal_w_container').css('marginTop', martop+jQuery(window).height()/2-jQuery('.modal_w_container').height()/2+'px');
    
    			}
    
    </script>
    и сами дивы:

    Код:
    <div id="overlay">
     
    			<div class="modal_w_container">
    here is some text
    </div>
    </div>
    
    в приведенном примере, внутренний див наследует прозрачность от родительского, поэтому любой элемент в нем получается полупрозрачным.

    вопрос - КАК ограничить область действия прозрачности, чтобы внутренний див мог отображать элементы БЕЗ нее вообще?
     
  2. gruz222

    gruz222 Постоялец

    Регистр.:
    8 авг 2008
    Сообщения:
    62
    Симпатии:
    6
    попробуй диву который должен быть непрозрачным сделать так


    .no_opacity {
    position:relative;
    z-index:1000000;
    -moz-opacity: 1.0 !important;
    filter: alpha(opacity=100) !important;
    }
     
  3. diavolic

    diavolic

    Регистр.:
    17 мар 2010
    Сообщения:
    522
    Симпатии:
    102
    попробовал - не помогает
     
  4. Mr.Emm

    Mr.Emm Постоялец

    Регистр.:
    5 май 2008
    Сообщения:
    144
    Симпатии:
    107
    http://habrahabr.ru/blogs/css/30565/
     
  5. diavolic

    diavolic

    Регистр.:
    17 мар 2010
    Сообщения:
    522
    Симпатии:
    102
    это уже тоже читал. там кстати даже в самом примере див с текстом прозрачный в обоих случаях. не помогает. где то еще советовали параграф выносить за пределы дива а потом отрицательным маргином впихивать его обратно, но если честно такой прием как то не дошел до моего сознания
     
  6. toxass

    toxass Постоялец

    Регистр.:
    24 июл 2007
    Сообщения:
    114
    Симпатии:
    15
    Сделай 1 слой через PNG файл с альфа каналом (размером 1х1 пиксель), самый простой вариант.
     
  7. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Прозрачность действует на все дочерние элементы, импортировать стиль, перепрыгнув родителя - не возможно.
    Я так понял, что идея в том, что бы задать, например, бекграунду прозрачность (нижнему слою), а верхние элементы без фильтров?
    Тогда просто нужно переделать саму структуру
    HTML:
    <div style="position:relative;">
     <div id="overlay"  style="position:absolute: top:0; left:0;"></div>
     <div class="modal_w_container" style="position:absolute: top:0; left:0;>
        here is some text
      </div>
    </div>
     
    diavolic нравится это.
  8. diavolic

    diavolic

    Регистр.:
    17 мар 2010
    Сообщения:
    522
    Симпатии:
    102
    как это ни странно и раньше пробовал вариант с отделением дива предка от дива потомка, но почему то не работало. вобщем вариант в сообщении выше нормально работает, можно закрыть тему