HTML
<div id="container">
<div id="top">
<div id="plashkaTop"></div>
</div>
</div>
CSS
#container{
top:0; left:0;
width:100%;
position:relative;
}
#top{
height:70px;
margin:0 0 0 230px;
}
#plashkaTop{
width:100%;height:36px;
margin:0;
background: url(../img/bgTop.png) repeat-x; // в картинке есть полупрозрачная тень (поэтому пнг). ширина картинки 510px – размножается по-горизонтали на всю ширину окна.
position:relative;
}
И опять о прозрачности png в IE
Тема, конечно затертая до безобразия, но поиск в нете не дал результатов решения именно той проблемы, которая возникла у меня.
для нормальных браузеров пишу
Собственно вопрос – как это (размножить пнг картинку по горизонтали) реализовать для ИЕ?
Пробовал:
но оно тупо растягивает эти 510рх на всю ширину окна и получается ужас :eek:
для нормальных браузеров пишу
Код:
Собственно вопрос – как это (размножить пнг картинку по горизонтали) реализовать для ИЕ?
Пробовал:
Код:
#plashkaTop{
width:100%;height:36px;
margin:0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/ bgTop.png', sizingMethod=scale);
position:relative;}
width:100%;height:36px;
margin:0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/ bgTop.png', sizingMethod=scale);
position:relative;}
но оно тупо растягивает эти 510рх на всю ширину окна и получается ужас :eek:
Цитата:
Собственно вопрос – как это (размножить пнг картинку по горизонтали) реализовать для ИЕ?
Так же, как и для всех остальных браузеров. Просто прозрачность ослов отображена не будет, просто будет заливка серым.
Простите, непонял. Во-первых: для остальных браузеров я пишу, например, background-repeat:repeat-x; а у filter нет такого свойства. Во-вторых: прозрачность то и нужна!
Цитата: cogonet
Простите, непонял. Во-первых: для остальных браузеров я пишу, например, background-repeat:repeat-x; а у filter нет такого свойства. Во-вторых: прозрачность то и нужна!
Ну вот если и для осла прописать как и для остальных браузеров, то он картинку продублирует как нужно. Но без альфа канала естественно.
А нужна прозрачность.... IE PNG прозрачность в версиях меньше 7-ой не поддерживает. И муть тут что-то... только проблемы себе искать. Как-то через JS скрипты это пытаюсь решать, как это делать поиск ответит ибо вопрос пережевывался в сети уже не одну сотню раз. И приходят к одному выводу... если нужно PNG, то осла послать на .... ибо все хаки это все не нативно и изврат.
Есть способы заставить работать прозрачность png в более ранних версиях осла чем 7... Идем в гугл и ищем по ключевым словам "хакинг ie png"
та проблема может быть решена через подключение (начиная с версии 5.5) фильтра альфа-прозрачности из комплекта DirectX-драйверов (например, с помощью скрипта pngfix.js)
http://homepage.ntlworld.com/bobosola/index.htm
http://homepage.ntlworld.com/bobosola/index.htm
Цитата: Alximik
та проблема может быть решена через подключение (начиная с версии 5.5) фильтра альфа-прозрачности из комплекта DirectX-драйверов (например, с помощью скрипта pngfix.js)
http://homepage.ntlworld.com/bobosola/index.htm
http://homepage.ntlworld.com/bobosola/index.htm
Очень актуально для неIE браузеров, особенно на неWin платформе...
Уважаемые, Вы наверное не совсем поняли сути вопроса. Я знаю, как сделать прозрачность пнг для ИЕ, проблема не в этом. Мне нужно продублировать пнг-картинку n-раз по оси Х чтобы она занимала всю ширину экрана, и поскольку у filter нет свойства repeat, то видать средствами css это сделать нереально?
http://www.w3.org/TR/CSS21/colors.html#background-properties
background-repeat: repeat-x;
PS Кстати нашел неточность (из-за этого может не работать).
Надо поставить кавычки
background: url('../img/bgTop.png') repeat-x;
background-repeat: repeat-x;
PS Кстати нашел неточность (из-за этого может не работать).
Надо поставить кавычки
background: url('../img/bgTop.png') repeat-x;
Цитата:
background-repeat: repeat-x;
Может я чего не понимаю, или не так объясняю. filter не устанавливает картинку в background, по этому repeat-x для него не работает!
А кавычки не обязательны!
Прочитав всю ветку 3 раза я наконец понял что вы хотите (немного невнятно написано - потому вам никто не отписался по теме).
Фон и картинка - разные вещи. Фильтр применяется к изображениям. К фону его применить нельзя.
Задача стоит размножить картинку, "замостить" ею некую область. Покопавшись в голове (немного даже в чужой) простого решения я не нашел. Тут либо JavaScript, либо что-то такое чего я пока не знаю. Поэтому сформулирую проблему для остальных еще раз:
Человек хочет "замостить" картинкой с примененным к ней фильтром некую область (ячейку таблицы, див и т.д.). Как?
Фон и картинка - разные вещи. Фильтр применяется к изображениям. К фону его применить нельзя.
Задача стоит размножить картинку, "замостить" ею некую область. Покопавшись в голове (немного даже в чужой) простого решения я не нашел. Тут либо JavaScript, либо что-то такое чего я пока не знаю. Поэтому сформулирую проблему для остальных еще раз:
Человек хочет "замостить" картинкой с примененным к ней фильтром некую область (ячейку таблицы, див и т.д.). Как?
Воот, наконец-то :) Простите, если ввел Вас в заблуждение. Итак - ищем ответы! Что самое странное, неужели никому не приходилось делать этого раньше?
Вот-вот. ))) вопрос монтиться поднимать. Результат был один: filter применить к фоновой картинке нельзя, картинку продублировать Х раз тоже нельзя. А через JS это изврат полнейший
Ну, сказать "нельзя" - просто. Ваше предложение я понял - отказатся от пнг. Есче варианты будут?
Цитата:
А через JS это изврат полнейший
в данном случае - согласен
А других-то вариантов и нет. Хотя можно из заранее созданного PSD (т.е. где задано все вплоть до фона самой страницы) нарезать GIF-ы и уже все это пихать на сайт. Тогда полупрозрачность будет поддержана во всех браузерах, однако не всегда это приемлено особенно при резиновой верстке.
Цитата: alekciy
А других-то вариантов и нет. Хотя можно из заранее созданного PSD (т.е. где задано все вплоть до фона самой страницы) нарезать GIF-ы и уже все это пихать на сайт. Тогда полупрозрачность будет поддержана во всех браузерах, однако не всегда это приемлено особенно при резиновой верстке.
GIF не поддерживает полупрозрачность...
Как это нельзя использовать фильтр для фона, вы в своем уме??
Вот пример из кода одного их сделанных мной сайтов:
Еще как параметр можно задавать sizingMethod, но и это не поможет размножить вашу картинку по фону (
Вот пример из кода одного их сделанных мной сайтов:
Код:
#block {
background: url(/img/r-head.png) no-repeat right !important;
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/r-head.png");
}
background: url(/img/r-head.png) no-repeat right !important;
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/r-head.png");
}
Еще как параметр можно задавать sizingMethod, но и это не поможет размножить вашу картинку по фону (
Цитата: cogonet
Собственно вопрос – как это (размножить пнг картинку по горизонтали) реализовать для ИЕ?
Фоновый рисунок с альфаканалом размножить не получиться.
В вашем конкретном случае можно использовать в качестве фона картинку, ширина которой будет достаточной для заполнения экрана.
В приведенном примере я использовал картинку 1600 х 36 px:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>pngBackgroundRepeatX</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; Windows-1251" />
<style type="text/css">
body {
font-size: 86%;
font-family: Verdana, Tahoma, sans-serif;
margin: 0;
padding: 0;
border: none;
color: #666;
background-color: #fff;
}
#container{
top:0; left:0;
width:100%;
position:relative;
}
#top{
height:170px;
margin:0 0 0 230px;
padding: 0;
border: solid 1px #666;
}
div.plashkaTop{
width:100%;height:36px;
margin:0;
padding: 0;
background: #fff;
position:relative;
overflow: hidden;
}
.bgBlack {
color: inherit;
background-color: #000 !important;
}
img.png {
position: absolute;
top: 0;
left: 0;
z-index: 1;
behavior: url('hack-png.htc');
}
span.plashkaTxt {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 99;
margin: 0;
padding: 6px 0 0 6px;
font-weight: bold;
color: #fff;
background-color: transparent;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div class="plashkaTop">
<img class="png" src="../img/bgTop.png" width="1600" height="36" />
<span class="plashkaTxt">White backgorund</span>
</div>
<div class="plashkaTop bgBlack">
<img class="png" src="../img/bgTop.png" width="1600" height="36" />
<span class="plashkaTxt">Black background</span>
</div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>pngBackgroundRepeatX</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; Windows-1251" />
<style type="text/css">
body {
font-size: 86%;
font-family: Verdana, Tahoma, sans-serif;
margin: 0;
padding: 0;
border: none;
color: #666;
background-color: #fff;
}
#container{
top:0; left:0;
width:100%;
position:relative;
}
#top{
height:170px;
margin:0 0 0 230px;
padding: 0;
border: solid 1px #666;
}
div.plashkaTop{
width:100%;height:36px;
margin:0;
padding: 0;
background: #fff;
position:relative;
overflow: hidden;
}
.bgBlack {
color: inherit;
background-color: #000 !important;
}
img.png {
position: absolute;
top: 0;
left: 0;
z-index: 1;
behavior: url('hack-png.htc');
}
span.plashkaTxt {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 99;
margin: 0;
padding: 6px 0 0 6px;
font-weight: bold;
color: #fff;
background-color: transparent;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div class="plashkaTop">
<img class="png" src="../img/bgTop.png" width="1600" height="36" />
<span class="plashkaTxt">White backgorund</span>
</div>
<div class="plashkaTop bgBlack">
<img class="png" src="../img/bgTop.png" width="1600" height="36" />
<span class="plashkaTxt">Black background</span>
</div>
</div>
</div>
</body>
</html>
Carpus,
запутанная ситуация с использованием дополнительных файлов - не проще ли использовать те три строки, которые помещены мною чуть выше??
запутанная ситуация с использованием дополнительных файлов - не проще ли использовать те три строки, которые помещены мною чуть выше??
Carpus,
запутанная ситуация с использованием дополнительных файлов - не проще ли использовать те три строки, которые помещены мною чуть выше??
запутанная ситуация с использованием дополнительных файлов - не проще ли использовать те три строки, которые помещены мною чуть выше??
Цитата: Nuxx
Carpus,
запутанная ситуация с использованием дополнительных файлов - не проще ли использовать те три строки, которые помещены мною чуть выше??
запутанная ситуация с использованием дополнительных файлов - не проще ли использовать те три строки, которые помещены мною чуть выше??
Я попробовал сделать так, как Вы предложили -- появляется горизонтальная полоса прокрутки.
А "дополнительный" файл hack-png.htc позволяет обойтись всего лишь указанием класса для всех изображений с альфаканалом.
З.Ы. Забыл предупредить -- в hack-png используется прозрачный gif 1x1 px
Цитата: RussianSpy
GIF не поддерживает полупрозрачность...
Ну так о чем и речь! В созданной PSD шаблоне полупрозрачность в GIF будет! http://alekciy.fatal.ru/gif.gif
Цитата: alekciy
Ну так о чем и речь! В созданной PSD шаблоне полупрозрачность в GIF будет! http://alekciy.fatal.ru/gif.gif
Это нельзя называть "полупрозрачность" - это ее имитация.
Цитата: alekciy
Ну так о чем и речь! В созданной PSD шаблоне полупрозрачность в GIF будет! http://alekciy.fatal.ru/gif.gif
Полупрозрачность - это когда картинка имеет полупрозрачный фон (допустим при наложении полупрозрачной картинки на любую другую, сквозь первую будет частично видна вторая) - что в принципе не поддерживается форматом GIF,
так же есть прозрачные картинки, не обладающие вышеуказанным свойством, а просто имеющие прозрачные участки картинки. Это поддерживается как GIF'ом, так и PNG.
Поэтому не стоит путать эти два разных по сути понятия.
Спасибо всем откликнувшимся.
То Carpus: я тоже пробовал вариант с картинкой большей ширины - у меня правда не получилось убрать полосу прокрутки, overflow: hidden; почему-то не хотел работать :(
В Вашем же примере есть несколько недостатков:
1. У меня в ИЕ вокруг пнг-картинки странный бордер.
2. Эта картинка является фоновым элементом, а не частью контента, а оформление принято выносить в цсс файл.
3. Не валидность (ну с этим еще можно было бы смерится)
Но, несмотря на все это – похоже это единственный способ решить задачу не прибегая к JS (вот только бы со странным бордером разобраться)
То Carpus: я тоже пробовал вариант с картинкой большей ширины - у меня правда не получилось убрать полосу прокрутки, overflow: hidden; почему-то не хотел работать :(
В Вашем же примере есть несколько недостатков:
1. У меня в ИЕ вокруг пнг-картинки странный бордер.
2. Эта картинка является фоновым элементом, а не частью контента, а оформление принято выносить в цсс файл.
3. Не валидность (ну с этим еще можно было бы смерится)
Но, несмотря на все это – похоже это единственный способ решить задачу не прибегая к JS (вот только бы со странным бордером разобраться)
Цитата: Nuxx
Полупрозрачность - это когда картинка имеет полупрозрачный фон (допустим при наложении полупрозрачной картинки на любую другую, сквозь первую будет частично видна вторая) - что в принципе не поддерживается форматом GIF,
так же есть прозрачные картинки, не обладающие вышеуказанным свойством, а просто имеющие прозрачные участки картинки. Это поддерживается как GIF'ом, так и PNG.
Поэтому не стоит путать эти два разных по сути понятия.
так же есть прозрачные картинки, не обладающие вышеуказанным свойством, а просто имеющие прозрачные участки картинки. Это поддерживается как GIF'ом, так и PNG.
Поэтому не стоит путать эти два разных по сути понятия.
Я то не путаю и все это уже давно и прекрасно знаю ;)
Цитата: RussianSpy
Это нельзя называть "полупрозрачность" - это ее имитация.
А не один ли хрен? Сайт режем из PSD шаблона все равно и при правильном проектировании PSD, а потом при привильной резке шаблона как раз и получил требуемую полупрозрачность на странице. Конечно пользователю глубоко побоку что там осел держит/не_держит, есть полупрозрачность в GIF или её нет. Он хочет видеть полупрозрачность, он видит ей.
Подобное решение не всегда приемлено, но оно максимально кроссбраузерное и с минимум глюков.
Цитата: cogonet
1. У меня в ИЕ вокруг пнг-картинки странный бордер.
img.png {
...
border: none;
}
Цитата:
2. Эта картинка является фоновым элементом, а не частью контента, а оформление принято выносить в цсс файл.
Так ведь другого решения нету. По крайней мере я его не вижу.
Цитата:
3. Не валидность (ну с этим еще можно было бы смерится)
Код:
<img class="png" src="../img/bgTop.png" width="1600" height="36" alt=" " />
behavior в css - см. мой пост тут
2 cogonet
Убедитесь, что сервер хостера отдает правильный Content-Type для .htc . Должен быть "text/x-component". Если нет, добавляйте в .htaccess директиву "AddType text/x-component .htc".
Убедитесь, что сервер хостера отдает правильный Content-Type для .htc . Должен быть "text/x-component". Если нет, добавляйте в .htaccess директиву "AddType text/x-component .htc".
Цитата:
border: none;
не помогло
Цитата:
Так ведь другого решения нету ...
согласен
Цитата:
см. мой пост тут
)) в идеале - ехать правильно! но я же сказал - с этим еще можно смириться
Цитата: cogonet
)) в идеале - ехать правильно! но я же сказал - с этим еще можно смириться
:) Я вот это имел в виду:
Код:
<body>
<!--[if IE]><div id=wrapper style=" width: expression((documentElement.clientWidth||document. body.clientWidth)<800?'800px':'100%');
}"<![endif]-->
<!-- <![if !IE]> --><div id="wrapper"><!-- <![endif]> -->
<!--[if IE]><div id=wrapper style=" width: expression((documentElement.clientWidth||document. body.clientWidth)<800?'800px':'100%');
}"<![endif]-->
<!-- <![if !IE]> --><div id="wrapper"><!-- <![endif]> -->
По поводу бордера - ну, не знаю. У меня его нету.
Цитата:
Убедитесь, что сервер хостера отдает правильный Content-Type
Возвращает text/plain - директива не помогла.
Наверное у них в конфиге указано text/plain, или AddType в .htaccess не разрешено.
У меня отдавал text/html, IE просто не обрабатывал .htc
У меня отдавал text/html, IE просто не обрабатывал .htc
Цитата:
Пробовал:
Код:
#plashkaTop{
width:100%;height:36px;
margin:0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/ bgTop.png', sizingMethod=scale);
position:relative;}
width:100%;height:36px;
margin:0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/ bgTop.png', sizingMethod=scale);
position:relative;}
но оно тупо растягивает эти 510рх на всю ширину окна и получается ужас :eek:
Кстати: sizingMethod='scale' и растягивает фон на всю ширину. Без использования этого метода фон растягиваться не будет (ну эт так для общего развития:) )
Цитата:
общего развития
спасибо, это мы в школе проходили :)
Цитата:
Наверное у них в конфиге
Вообще-то я тестирую у себя на локалке, а файл подключается потому как пнг файл отображается без загадочного фона но с загадочным бордером! ))
Цитата: cogonet
Вообще-то я тестирую у себя на локалке, а файл подключается потому как пнг файл отображается без загадочного фона но с загадочным бордером! ))
Ситуация непонятная. На двух мащинах посмотрел, нигде нет бордера. Может быть какие-то изменения в код внесли? Попробуйте поставить "border: none !important;" для картинки и всех родительских элементов, возможно поможет.
Помогло указание высоты картинки на 2px меньше от реального!
Спасибо, тему можно закрывать.
Спасибо, тему можно закрывать.