Прозрачен PNG

sizif

Registered
Здравейте!

Трябва да сложа прозрачно PNG -изображение в страницата. При ИЕ отколе прозрачния PNG дава проблем. Как мога да укажа на браузъра да го покаже както transparent?

Срещал съм подобен урок в уеб-турист, но не успях да го намеря.

Блгаодаря предварително!
 
Аз ти препоръчвам да го направиш това изображение бекграунд, ако не е и да ползваш тоя хак:

Код:
* html .my_class {background:none; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/light.png', sizingMethod='crop');}

Тоя хак е само за ИЕ6, то само там не се поддържа png-та. Със * html казваш , че ще се чете само от ИЕ6.

Тези хакове който са с отделни файлове, бавят , а и ако имаш повече пнг-та стама мн тромаво.
 
С CSS няма ли да стане?
 
shterev,

сега ти видях мнението.

Ще опитам, но ме притеснява тази забележка:

Тоя хак е само за ИЕ6, то само там не се поддържа png-та. Със * html казваш , че ще се чете само от ИЕ6.

Сигурен ли си, че условието няма да се изпълни от ИЕ7?

CaMoTeH_,

долкокото видях от урока, използват същия Js, който е предложил adrian с единия от линковете.

1 изображение е - фирмено лого. Може да мине и за бекграунд, макар че не е много желателно, но при варианта с килограми Js по-добре да го направя бекграунд.

PS:

shterev,

получава се, но възникват 2 проблема:

1) как да центирам въпросния бекграунд? (background-position:center center като стойност очевидно няма как да свърши работа)

2) как да укажа въпросното изображение за другите браузъри без да се окаже дублирано под ИЕ (указано веднъж в хака и втори път в отделен клас заради другите браузъри)?
 
1 изображение е - фирмено лого. Може да мине и за бекграунд, макар че не е много желателно, но при варианта с килограми Js по-добре да го направя бекграунд.

Аз не виждам и не мога да ти проумея проблема, какво ще стане ако е бекграунд на див и в него има а таг?Но много зависи от случая.

По-добре бих ти отговорил ако видя точно за какво става дума, но да се центрира бекграунда става във всички браузъри освен ИЕ6.
1) как да центирам въпросния бекграунд? (background-position:center center като стойност очевидно няма как да свърши работа)

Ще се центрира освен в ИЕ6.

2) как да укажа въпросното изображение за другите браузъри без да се окаже дублирано под ИЕ (указано веднъж в хака и втори път в отделен клас заради другите браузъри)?

Тук не си ме разбрал.

.class{
background:url();
}

се изпълнява от всички браузъри

* html .class{

} изпълнява се само от ИЕ6, другите браузъри не го четат това. И тук си слагаш филтъра за ИЕ6 за пнг-та.Но проблема е че не може да се центрира.Има други методи, който могат да свършат работа, но пак зависи от случая.
 
Извадка от стиловия шаблон след като направих изображението бекграунд:

#logo
{
background: url("grafika/logoW.png") no-repeat center center
}

В кода:

<TD ID="logo"> </TD>


Къде слагам хака?
 
sizif каза:
Извадка от стиловия шаблон след като направих изображението бекграунд:

#logo
{
background: url("grafika/logoW.png") no-repeat center center
}

В кода:

<TD ID="logo"> </TD>


Къде слагам хака?

Код:
#logo
{
background: url("grafika/logoW.png") no-repeat center center
}

* html #logo
{
background:none; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grafika/logoW.png', sizingMethod='crop');
}


Но защо не направиш един а таг на него да зададеш бекграунда, без да го центрираш и вече щом е таблиза оттам да се центрира а-то?

#logo{
display:block;
width:100px;
height:80px;
position:relative;
background: url("grafika/logoW.png") no-repeat left top;
}


<TD valign="middle" ><a id="logo" href="index.php"></a></TD>
 
shterev,

Получи се, благодаря + 1т.

Към логото обаче имам Js -ефекти и анимация, които не работят като трябва и за да оправя проблемите ще трябва да ползвам още JS, което в случая е недопустимо (логото е основен линк в страницата).

Ще търся решение без PNG :(
 
Включва през 300 милисекунди няколко полета, на които стойността при зареждане е display:none, управлява появата на логото (също със стойност на елемента, в който се намира display:none), а самото лого е връзка към вътрешните страници, която след минаване с мишката включва други анимирани ефекти (мигащо изображение "Ентър", поява на други връзки и т.н). Страницата прилича на флашовка без да е такава, но по-важното е, че цялото съдържание е в ХТМЛ, така че да може да се чете от гугъл :))

В момента половината анимация (от логото нататък) не работи, както трябва защото ефектите с мишката се активират само по контурите на логото. Ще опитам да сложа прозрачен гиф върху логото с надеждата, че ще го отчита като плътен обект, но ме притеснява, че гугъл може да реши, че съм сложил фалшива връзка и ще трябва да помисля дали да не направя прехода с Js, а самата връзка да я дублирам някъде с анчър (<A href...>).

Затова казвам, че заради един PNG не си заслужава да преправям цялата страница :)
 
я дай едно демо? И кажи с кой браузър го гледаш? За отчитането дет викаш му сложи едно position:relative;
 
В момента малко поосрах нещата и не мога да дам демо.

Не пиша код за първи път :)
ИЕ и Mozila/FF, а после ще прегледам профилактично с Опера

Малко ме съмнява position:relative; да свърши работа, но ще опитам.
 

Back
Горе