0 Всего найдено: 13

kuflasher Сообщение 30/08/2012 17:20 Копия темы
Прозрачный png в background-image Добрый вечер! Спасайте :) Я уже 3 часа немогу разобраться с прозрачностью png в background-image. Пробую использовать PIE.htc, но он не работает вроде бы :(
Вот что я пишу в css:

.slider-button-arrow{
behavior: url(PIE.htc);
background: url('../img/slider-bg-arrow.png') no-repeat;
-pie-background: url('../img/slider-bg-arrow.png') no-repeat;
width: 43px;
height: 43px;
margin: 120px 0 0 0;
cursor: pointer;
}

EvgeniyKuklin Сообщение 30/08/2012 17:32 Копия темы
Вы поддерживаете IE6? Не надо этого делать! :)

По теме вопроса, чтобы PIE работал, элементу должен быть назначен position: relative | absolute

kuflasher Сообщение 30/08/2012 17:38 Копия темы
Я не поддерживаю IE6. Но верстать приходится под него :(
Вот чисто ради интереса набросал тестовую страничку и там с таким кодом все работает:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"" target="_blank" >www.w3.org/TR/html4/stric...
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{background: #000;}
div{
behavior: url(PIE.htc);
background: url(img.png) no-repeat;
-pie-background: url(img.png) no-repeat;
width: 43px;
height: 43px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

EvgeniyKuklin Сообщение 30/08/2012 17:46 Копия темы
Вообще, ИМХО, использовать PIE с помощью htc-файла не самая удачная практика – куча проблем с этими htc. Я делаю так:
1. Подключаем pie.js

2. В script.js пишем что-то вроде:
/*@cc_on
@if ((@_jscript_version == 5.6) || (@_jscript_version == 5.7) || (@_jscript_version == 5.8))
$('.js-pie').each(function(){ PIE.attach(this); });
@end
@*/
3. Элементу, к которому надо применить PIE добавляем класс "js-pie"

kuflasher Сообщение 30/08/2012 17:58 Копия темы
Не работает :( Может есть способы лучше врубить прозрачность? Этот PIE уже бесит меня :D

EvgeniyKuklin Сообщение 30/08/2012 18:10 Копия темы
Откапал из закромов :)

* html .test { font-size: expression(runtimeStyle.fontSize = currentStyle.fontSize,
(currentStyle.backgroundImage != "none") ? (
this.imgpath = currentStyle.backgroundImage.split('\"')[1],
runtimeStyle.backgroundImage = "none",
this.newimg = new Image(),
newimg.attachEvent("onload", function(){ runtimeStyle.filter += "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgpath + "',sizingMethod='crop')" }),
newimg.src = imgpath
) : 0
); }

kuflasher Сообщение 30/08/2012 18:19 Копия темы
О_о Жесткое выражение. И это для каждого блока с прозрачным фоном вставлять?

EvgeniyKuklin Сообщение 30/08/2012 18:27 Копия темы
Это expression, который надо разместить в стилевом файле для IE6/7
в основном файле screen.css прописываете обычный пусть к фоновой картинке
.test1 { background: url(...) no-repeat 0 0; }
.test2 { background: url(...) no-repeat 0 0; }
в файле screen.ie.css для ie прописываете
* html .test1,
* html .test2 {...то страшное выражение...}
то есть тот большой кусок кода можно прописывать один раз
надеюсь понятно объяснил

EvgeniyKuklin Сообщение 30/08/2012 18:28 Копия темы
В самом expression-e фоновый рисунок еще раз прописывать не надо – он его сам "распознает"
Expression писал сам, долгое время он мне служил верой и правдой :)

ivanna Сообщение 30/08/2012 19:33 Копия темы
из-под css pie.htc отработает в серверной среде.

kuflasher Сообщение 30/08/2012 20:04 Копия темы
Я на сервере и тестирую :) В общем не разобрался с прозрачностью Буду завтра ковыряться...

ivanna Сообщение 30/08/2012 20:07 Копия темы
а зачем pie ? вот хорощая вещь – www.dillerdesign.com/expe...

kuflasher Сообщение 30/08/2012 20:10 Копия темы
Благодарю! Завтра первым же делом опробую этот вариант :)