Hoe afwisseldne regelkleur en achtergrondafbeelding combineren ?

Status
Niet open voor verdere reacties.
L

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Hoe combineer ik, bij de afdruk/display van een tabel, de afwisselende regelkleur met een afbeelding (als watermerk), zodat beiden zichtbaar zijn ?
Bij toevoeging van een background image lukt het niet om deze zichtbaar te maken in de gekleurde regels.
Dank voor een tip - Leifoet
 
Goedemorgen. Kan je voorbeeld plaatje of site sturen hoe je het precies wil?
Ik heb een jsfiddle gevonden die een watermerk voorbeeld doet bij een gewone pagina, wellicht kan je dat bij de tabel gebruiken.
Die oplossing gaat uit van positie absoluut te gebruiken waar ik ook aan dacht.
 
Dank Damnsharp voor de toelichting. (excuses voor late reactie - was er even 'tussenuit')

Hoe kan ik met onderstaande code een afbeelding als achtergrond gebruiken waarbij de opacity enkel van de afbeelding verlaagd wordt ? dus niet van de tekst - dit lukt niet - de tekst (eigenlijk de hele pagina) wordt ook vaag.
Is het vervolgens ook mogelijk om deze afbeelding-in-kleur als Z/W (of andere kleur) weer te geven met CSS-code ?

Dank - Leifoet

<style>
div {
background: url("images/XYZ.gif"); opacity: 0.5;
background-position: 350px center;
background-size: 300px, auto;
background-repeat: no-repeat;
}
</style>
 
Laatst bewerkt:
Hoi, nu ben ik er even tussenuit (vakantie) maar zal er even over nadenken. Misschien anders een andere helpmij collega die idee heeft.
 
Hoi

Misschien heb je het al gevonden, maar dit werkt.
Code: 
<div class="opacity">
</div>

.opacity {
	/*regel hieronder voor test*/
	width: 500px; height: 500px; border: 1px solid #333;
	background: url("images/XYZ.gif");
	opacity: 0.5;
	background-position: 350px center;
	background-size: 300px auto;
	background-repeat: no-repeat;
}
Suc6. Have fun.
 
De simpelste methode is om de afbeelding zelf opacity te geven, in Photoshop of een ander bewerkingsprogramma. Het is een gif bestand, dus dat kan.

De kleurstelling van een afbeelding met CSS aanpassen kan wel met filter, maar ik weet niet zeker hoe het werkt icm een achtergrondafbeelding. Sowieso werkt het niet in IE (hoe kan het ook anders).
 
Met css heb je meer mogelijkheden, bijvoorbeeld dit eronder
Code: 
.opacity:hover { opacity: 0.25; }
.opacity:active { opacity: 0.75; }
 
bron zei:
Met css heb je meer mogelijkheden, bijvoorbeeld dit eronder
Code: 
.opacity:hover { opacity: 0.25; }
.opacity:active { opacity: 0.75; }
Klik om te vergroten...
Is waar, al kun je dat specifieke voorbeeld met een extra afbeelding ook met 'mijn' methode bereiken.
 
Is waar, al kun je dat specifieke voorbeeld met een extra afbeelding ook met 'mijn' methode bereiken.
Klik om te vergroten...

Is ook waar, maar ik maak alleen sites met een hoge performance :)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan