Jump to content
  • 0

Прозрачный PNG в background


d0ublezer0
 Share

Question

Есть проблема - ссылки имеют фон с прозрачным PNG, и в 6м эксплорере не удается заставить его быть прозрачным.

для всех остальных картинок PNG, в том числе и для изображений PNG, положеных как фон, срабатывает, а для ссылки - нет

Ссылка в коде выглядит так:

<a class="png mnu m01" id="act" href="/company/">компания</a>

Обработчик в коде, обрабатывающий ПНГ (взято у Лебедева):

		<!--[if lt IE 7]>
<style>
.png{
filter: expression(fixPNG(this));
}
</style>
<script type="text/javascript" src="/ie6-fix.js"></script>
<![endif]-->

Содержимое файла ie6-fix.js:

try{
document.execCommand("BackgroundImageCache", false, true);
} catch(e) {

}

function fixPNG(element) {
if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent)) {
var src;

if (element.tagName == 'IMG') {
if (/\.png$/.test(element.src)) {
src = element.src;
element.src = "./i/e.gif";
}
} else {
src = element.currentStyle.backgroundImage
.match(/url\("(.+\.png)"\)/i)
if (src) {
src = src[1];
element.runtimeStyle.backgroundImage = "none";
}
}

var re_scale_mode = /iesizing\-(\w+)/;
var m = re_scale_mode.exec(element.className);

var scale_mode = (m) ? m[1] : 'crop';

if (src)
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
+ src + "',sizingMethod='" + scale_mode + "')";
}
}

Код CSS для ссылки:

a.mnu {
display:block;
height:26px;
width:150px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:1.08em;
padding-top:4px;
color:#FFFFFF;
text-decoration:none;
margin-top:5px;
margin-bottom:5px;
padding-left:29px;
}

a.mnu:hover{
background:url(/img/a_mnu_bg.png);
background-repeat:no-repeat;
}

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

ну или к примеру так:

/* png fix */
.png {
_behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "img/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

Link to comment
Share on other sites

  • 0

Если ни кто не против можно я сюда свою проблему, т.е. вопрос напишу ? Тоже связан с png и фоном :)

а как можно воплотить:

картинка полупрозрачная "center.png" стоит в части раздвижной области по иксу 'X' (background: url('../center.png') repeat-x top left) (т.е. таблица width=90%, резиновая) левая/правая сторона на месте, а центр как раз эта картинка "center.png" растягивается. Вот как сделать что бы она не растягивалась а что нить другое происходило. А то "center.png" при растягивание становиться не полупрозрачным, а вообще не прозрачным - серым.

[PNG 24]

Оу... спасибо... друг помог.

Оказалось всё куда было проще:

background-image: URL("/images/center.png"); 
background-position: center;

вот что значит чайник :) извините за оффтоп

Edited by TpaFFka
Link to comment
Share on other sites

  • 0
IE7 будет ругаться на экспрешшн в стиле, типа предупреждать об активном содержимом

Это если локальный файл с диска тестировать. Если загружать по HTTP, как положено - никто ругаться не будет.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy