Прозрачность CSS

Тема в разделе "Веб-дизайн", создана пользователем FaTeRy, 10 май 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. FaTeRy

    FaTeRy Создатель

    Регистр.:
    22 мар 2009
    Сообщения:
    30
    Симпатии:
    0
    Здравствуйте. Верстал я в XHTML 1.0 Strict, и наткнулся на проблему с прозрачностью.
    Кусок HTML кода:
    HTML:
    		<div id="container">
    			<div id="content">
    {info}{content}
    			</div><!-- #content-->
    		</div><!-- #container-->
    Кусок CSS кода:
    HTML:
    #container {
    	width: 100%;
    	float: left;
    	overflow: hidden;
    	background-color: #FFF;
    	opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);
    }
    Дело в том, что нужна прозрачность только у background-color: #FFF; , а в данном случае прозрачность накладывается на всё содержимое блока, тобишь на {info}{content}.
    Кто знает как решить проблему?
     
  2. Emporio

    Emporio Постоялец

    Регистр.:
    17 апр 2009
    Сообщения:
    63
    Симпатии:
    4
    Дай больше фрагмент HTML-кода, не совсем понятно.
     
  3. FaTeRy

    FaTeRy Создатель

    Регистр.:
    22 мар 2009
    Сообщения:
    30
    Симпатии:
    0
    а какой именно фрагмент?
    вот прозрачность - opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)
    тобишь она накладывается на фон дива container, но вместе с ним и прозрачны {info}{content} (если кто не знает - в дле так выводятся новости, проще сказать - текст). вот это и надо исправить. прозрачным должен быть только фон, но не текст.
     
  4. Compressor

    Compressor

    Регистр.:
    31 янв 2009
    Сообщения:
    314
    Симпатии:
    200
    Может быть этот слой сделать непрозрачным и без бэкграунда.. а под него подложить еще один див с прозрачностью, сожержащий только background-color: #FFF; ?
     
  5. dralex

    dralex Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    77
    Симпатии:
    18
    так и должно что накладывается прозрачность на содержимое

    используй прозрачную png !
     
    FaTeRy нравится это.
  6. progreccor

    progreccor Постоялец

    Регистр.:
    2 окт 2008
    Сообщения:
    121
    Симпатии:
    18
    прозрачная png не будет работать в IE6.0
     
  7. fima32

    fima32

    Регистр.:
    25 дек 2007
    Сообщения:
    201
    Симпатии:
    13
    Вот посмотрите
    http://kidsstyle.ru/
    сайт не мой, так что не спрашивайте, что да как, смотрите сами, но во всех браузерах, кроме ИЕ 3, 4, 5 версии прозрачность на этом сайте работает.
    Прозрачность смотрите у юлы, вернее ее тени.
     
    FaTeRy нравится это.
  8. progreccor

    progreccor Постоялец

    Регистр.:
    2 окт 2008
    Сообщения:
    121
    Симпатии:
    18
    Да, действительно. png здесь отображается с полупрозрачность в IE6.0. Еще не разобрался как им это удалось.

    Добавлено через 26 минут
    чтобы отображать на IE6.0 png с полупрозрачность надо делать так:

    <img src="blank.gif" style="width: 100px; height: 100px; filter:
    progid: DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')" />

    А на том сайте с помощью java скриптов выполняется применение этого свойства ко всем картинкам. Запретите ява скрипт и увидите как все изменится. :)
     
    FaTeRy нравится это.
  9. phgrey

    phgrey Создатель

    Регистр.:
    11 май 2008
    Сообщения:
    12
    Симпатии:
    2
    Для ie6 есть :ay: pngfix, если кому интересно
    Код:
    	<!--[if lt IE 7]><![if gte IE 5.5]>
    	<script type="text/javascript">
    		function fixPNG(element)
    		{
    		  //Если браузер IE версии 5.5-6
    		  if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
    		  {
    		    var src;
    			
    		    if (element.tagName=='IMG') //Если текущий элемент картинка (тэг IMG)
    		    {
    		      if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
    		      {
    		        src = element.src;
    		        element.src = "/blank.gif"; //заменяем изображение прозрачным gif-ом
    		      }
    		    }
    		    else //иначе, если это не картинка а другой элемент
    		    {
    			  //если у элемента задана фоновая картинка, то присваеваем значение свойства background-шmage переменной src
    		      src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
    		      if (src)
    		      {
    		        src = src[1]; //берем из значения свойства background-шmage только адрес картинки
    		        element.runtimeStyle.backgroundImage="none"; //убираем фоновое изображение
    		      }
    		    }
    		    //если, src не пуст, то нужно загрузить изображение с помощью фильтра AlphaImageLoader
    		    if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
    		  }
    		}
    		
    	</script>
    	<style type="text/css"> 
    		.pngfix{ filter:expression(fixPNG(this)); } 
    		.pngfix a{ position:relative; } 
    	</style>
    <![endif]><![endif]-->
    Все простенько, понятненько и багов в ие6 - замечено небыло (сайтов 15 сделано с этим фиксом).
    А, забыл, всем html-элементам с полупрозрачными png надо дать класс pngfix.
     
    FaTeRy нравится это.
Статус темы:
Закрыта.