webForumDet fria alternativet

Problem med alpha blend

4 svar · 322 visningar · startad av AndreasC

AndreasCMedlem sedan mars 20011 964 inlägg
#1

Har två divar, den ena inuti den andra, såhär.

<div class="alpha">

  <div class="no-alpha">
    text utan alpha blend
  </div>

</div>

css:

.alpha { filter: alpha(opacity=70);
              -moz-opacity: 0.7; background: #758467; }

.no-alpha { filter: none; }

Den omgivande divens bakgrundsfärg ska vara halvtransparent och det funkar bra med alpha filtret. Men innehållet i den innersta diven ska inte påverkas av detta. Hur löser jag det, filter: none; verkar inte fungera.

Också, hur får man filtret att fungera i Opera?

zcorpanMedlem sedan dec. 20042 245 inlägg
#2

Du kan använda en genomskinlig PNG-bild som bakgrund...

CSS3 egenskapen heter "opacity" och den stöds av Mozilla av nyare version. Ett trick är att lägga no-alfa-DIVen som syskon till alfa-DIVen istället för inuti den, och sen positionera den över den andra. :)

AndreasCMedlem sedan mars 20011 964 inlägg
#3

Kanske jag kör på en png istället, men jag kommer dock inte ihåg hur koden ser ut för att tvinga IE att visa halvtransparensen. Vet man kan lägga den på bilder men kan man applicera den på bakgrundsbild i css också?

AndreasCMedlem sedan mars 20011 964 inlägg
#4

Löste det mha denna information:

http://www.skyzyx.com/scripts/sleight.php

Där finns ett script för dels en vanlig png-bild men också om man vill använda en png-bild som bakgrundsbild.

Verkar funka kalas. Alla läsare som stödjer png och som inte är IE bryr sig inte om scriptet utan laddar png med full support för transparens hur fort somhelst. I ie tar det en liten stund för scriptet att laddas in så den grå bakgrunden ändras till att visa full support för transparens, alltså från att det är grått till att png-bilden visas tiled som det ska vara med transparens.

Nackdelar jag kan se är att det tar en liten stund i IE, typ 3-4 sekunder innan scriptet gör verkan + att IE inte hanterar gamma correction på rätt sätt, vilket innebär att bilden blir lite mörkare, inget som syns om man inte gämför mellan exempelvis IE och mozilla, men gör man det så är skillnaden inte uppenbar i mitt exempel, men iallafall synlig. Men det får man leva med.

Tyckte länge att IE var det bästa valet men naturligtvis har jag tänkt om när jag börjar se skillnaderna. Detta är en annan debatt men möjligtvis att IE var bäst men knappast längre.

zcorpanMedlem sedan dec. 20042 245 inlägg
#5

Du kan ju använda ett filter för IE och PNG-bild för alla andra. :)

131 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)