Opacity på background men ikke på tekst.

[South_Bridge]

har en div:

 

<div class="content">

<p>TEKST</p>

</div>

 

med følgende css:

 

.content

{

background-color: #3D3D3D;

border-color: #a8a8a8;

border-style: solid;

border-width: thin;

filter: alpha( opacity = 40 ); /* for IE */

opacity: 0.4; /* CSS3 standard */

}

 

det gjør at alt i div'en får 40% opacity, også teksten. det jeg ønsker er at kun boksen med dens bakgrunn+border skal få gjennomsiktighet og ikke teksten/annet innhold(feks bilder).

 

Hvordan fikser jeg det?

Endret 3. februar 2009 av South_Bridge

[ButterScotch]

Et triks er å bruke en semi-transparent png som bakgrunn i div'en din. Funker på alle fornuftige nettlesere, og kan fikses i IE6 med en liten include av et script e.l. (søk på IE6 png fix).

[South_Bridge]

takk for svar funket for meg

[Asterisk]

Det er dessverre ikke mulig å bruke opacity uten at alle elementer i denne div'en også blir påvirket. Opacity fungerer slik at den virker på dets element, og alle andre elementer som befinner seg i dette elementet. Gjør som jorgenys anbefalte og bruk et semi-transparent png som bakgrunn

 

Såvidt jeg vet så er det kun Safari som har en liten anelse støtte for hva du er ute etter.

[Lokaltog]

Eventuelt kan du bruke rgba(r, g, b, opacity), f.eks. slik: background:rgba(255, 0, 0, 0.5). Det funker iallefall i Firefox, er usikker på hvilke andre nettlesere som støtter det. På denne måten kan du gi opacity til border og bakgrunn uten å røre teksten.

[ButterScotch]

Eventuelt kan du bruke rgba(r, g, b, opacity), f.eks. slik: background:rgba(255, 0, 0, 0.5). Det funker iallefall i Firefox, er usikker på hvilke andre nettlesere som støtter det. På denne måten kan du gi opacity til border og bakgrunn uten å røre teksten.

 

Litt dyster lesning i den sammenheng.

 

Tenker her på IE, mens resten av verden faktisk har gått videre, men ikke opera, jøss =)

IE har forsåvidt et eget alternativ (som vanlig, for å støtte standarder i stedet hadde vel vært for ille).

[FrodeNilsen]

...

Tenker her på IE, mens resten av verden faktisk har gått videre, men ikke opera, jøss =)

...

 

Opacity fungerer ikke helt greit heller. Jeg forstår ikke helt hvorfor Opera skifter fontfarge til sort i den vedlagte filen. Funker bare med svart font i Opera? Har jeg gjort noe galt?

 

Selv Opera 10 beta har denne feilen.

 

At IE har gått videre er vel å ta rimelig hardt i, da de lager sin egen CSS deff.

 

Frode

 

Edit: Den vedlagte filen fungerer ikke under Vista 64-bit og Opera 9.63 eller Opera 9.10 beta. Den får derimot hvit tekst under Ubuntu 8.10 og Opera 9.62.

test.html

Endret 5. februar 2009 av FrodeNilsen

[ButterScotch]

...

Tenker her på IE, mens resten av verden faktisk har gått videre, men ikke opera, jøss =)

...

 

At IE har gått videre er vel å ta rimelig hardt i, da de lager sin egen CSS deff.

 

Var IE som var dyster lesning, mens resten av verden (firefox, safari, etc.) hadde gått videre.

 

Vil si IE tror de har 99% av markedet enda, og dermed ikke kommer helt ut av den "vi gjør som vi vil"-tankegangen.

[cfenzo]

som allerede nevnt, transparent png med 40% fikser biffen, og DD_belatedPNG fikser png for IE6

http://www.dillerdesign.com/experiment/DD_belatedPNG/

[FrodeNilsen]

som allerede nevnt, transparent png med 40% fikser biffen

...

 

Ikke helt.

 

Du må sette bakgrunden til gjennomsiktig, slik at de som ikke viser bakgrundsbildet ikke kan falle tilbake til bakgrundsfargen. Dette skjer for eksempel med en rekke mobile enhter.

 

Løsningen bryter med CSS strukturen, men det er vel ett trade-off vi kan leve med? Kjekt å huske på at tilbakefall er brukket når man designer siden.

 

IE6 fungerer vel bare png-alpha med ett DirectX filter?

 

Frode

[cfenzo]

man må vel da huske å ha en bakgrunnsfarge i bunn som teksten kan synes mot.. om bilder ikke skulle vises.. så har man en fallback.. gjelder forsåvidt all bruk av bilder hvor man ikke setter background-color på samme element (gif med transparency f.eks.)

 

edit: Egne stilsett for mobile enheter som tar seg av nettop det der kan jo også brukes..

 

IE6 fungerer fint med DD_belatedPNG som bruker vml istedet for DirectX filteret..

Har erfart at det gir mindre "hopp", og tåler litt flere png bilder på samme side,

pluss at DD_belatedPNG støtter background-repeat og background-position.. noe filter-løsningen ikke støtter ut av det blå (siste alfa av pngfix skal også støtte det til en viss grad, men hvordan det er gjort vet jeg ikke)

Endret 13. februar 2009 av cfenzo

[ButterScotch]

Du må sette bakgrunden til gjennomsiktig, slik at de som ikke viser bakgrundsbildet ikke kan falle tilbake til bakgrundsfargen. Dette skjer for eksempel med en rekke mobile enhter.

Det kommer jo helt an på hva du ønsker. Kan jo hende at null gjennomsiktighet er bedre enn full gjennomsiktighet når mellomtingen ikke er tilgjengelig.

 

Løsningen bryter med CSS strukturen, men det er vel ett trade-off vi kan leve med? Kjekt å huske på at tilbakefall er brukket når man designer siden.

Hvilken løsning refererer du til her?

[FrodeNilsen]

...

Kan jo hende at null gjennomsiktighet er bedre enn full gjennomsiktighet når mellomtingen ikke er tilgjengelig.

...

 

http://www.w3.org/TR/CSS21/colors.html#pro...ackground-image

This property sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).

 

Ved å bruke ett bakgrundsbilde for å simmulere gjennomsiktig bakgrundsfarge, så må bakgrundsfarge settes til transperent.

 

Både bakgrundsfarge og bakgrundsbilde vises, eller kun bakgrundsfarge, eller ingen av delene. Det er strukturen til CSS.

 

Når man designer ved å simmulere gjennomsiktig bakgrundsfarge, må man tenke på at man knekker CSS strukturen, slik at man ikke glemmer brukere som ikke viser bakgrundsbilder, eller nettlesere som rett og slett ikke viser disse. Det man da gjør, er å sikre at innholdet blir tilgjengelig ved at forgrund og bakgrund har tilstrekkelig kontrast, hvis bakgrundsbildene fjernes. Det burde holde.

 

Det er foreslått i denne tråden å lage egne handheld stilark uten png som transparent bakgrund, noe som ikke er så dumt, da dette da i praksis blir mer ett teoretisk problem. Man velger da bevisst å bryte CSS strukturen, da man mener fordelene er større enn ulempene.

 

Frode

[ButterScotch]

Ved å bruke ett bakgrundsbilde for å simmulere gjennomsiktig bakgrundsfarge, så må bakgrundsfarge settes til transperent.

Ja, det har du helt rett i.