PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Gebruik OPACITY

Door George van Baasbank op 01-12-2013 13:19 gewijzigd op 01-12-2013 14:16
1.430 views
Hallo allemaal,

Ik maak gebruik van onderstaand css-script maar het gaat niet helemaal goed. Het plaatje dat ik wil tonen wordt wel "vergrijsd" getoond maar nu wordt ook de tekst die er bovenop komt te staan ook vergrijsd.
Hoe kan ik dit nu voorkomen?


.moeder_8 {
	float: left;
	width: 95px;
    background: url('../images/symbool-vrouw.png') no-repeat;
    background-size: 95% 95%;
    opacity: 0.1;
    margin-left: 5px;
	position: relative;
    min-height: 200px;
    max-height: 200px;
}

.moeder_8_2 {
	float: left;
	width: 95px;
    padding-right: 5px;
    padding-bottom: 5px;
	margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    -webkit-box-shadow: 5px 5px 5px #ddd;
	box-shadow: 5px 5px 5px #ddd;
    min-height: 200px;
    max-height: 200px;
}

.blank_8 {
	float: left;
	width: 95px;
	position: relative;
    padding-right: 5px;
    padding-bottom: 5px;
	margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
    min-height: 200px;
    max-height: 200px;
}


En de HTML-code:


<div class="moeder_8_2">
   <div class="moeder_8">
      <div class="blank_8">
         <?php if ($cGeslachtPersoon1 == "F") { ?>
            <p class="stamboomtekst"><?php echo $cVoornaam1 ; ?></p>
            <?php if($cTussenvoeg1 != "") { ?>
               <p class="stamboomtekst"><?php echo $cTussenvoeg1 ; ?></p>
            <?php } ?>
            <p class="stamboomtekst"><?php echo $cAchternaam1 ; ?></p>
         <?php } else { ?>
            <p class="stamboomtekst"><?php echo $cVoornaam2 ; ?></p>
            <?php if($cTussenvoeg2 != "") { ?>
               <p class="stamboomtekst"><?php echo $cTussenvoeg2 ; ?></p>
            <?php } ?>
            <p class="stamboomtekst"><?php echo $cAchternaam2 ; ?></p>
         <?php } ?>
      </div>
   </div>
</div>



George van Baasbank
E Erwin H
01-12-2013 14:25
Disclaimer vooraf: ik haal deze zaken nog wel eens door elkaar, dus het kan precies andersom zijn, maar....

Opacity werkt op het element en alle elementen die daarin zitten. Als je het element dus doorschijnend laat zijn, dan is de tekst erin dat ook.
Als je echter een RGBA kleur aan het element geeft, dan geldt dat alleen voor die kleur, niet voor de rest. Tekst die er dan in staat zal dus gewoon normaal getoond worden.

In jouw geval is me niet duidelijk of je het plaatje dooschijnend wilt laten zijn, of dat je het alleen wilt 'vergrijzen' zoals je het noemt. Als het wilt vergrijzen dan zou ik er een div overheen plaatsen, die een RGBA kleur geven en daar dan de tekst in plaatsen.
Wouter J
01-12-2013 14:29
Even een wat betere uitleg van RGBa: RGB is de normale manier waarop wij kleuren bepalen als we werken met de computer. Het staat voor Red Green Blue. Ook de hex strings #ff0000 worden omgezet in RGB (ff voor Red, 00 voor Green en 00 voor Blue).

De a in RGBa staat voor alpha. Die zorgt voor de opacity. Dus rgba(255, 0, 0, .5) is de kleur rood (ff = 255, dus #ff0000 = rgb(255, 0, 0)) met een opacity van 50%

RGBa werkt niet voor hele oude browsers, mocht je die willen supporten zou je gebruik moeten maken van een fallback naar een opacity afbeelding.

Wil je iets vergrijzen kun je ook nog werken met filters, enige nadeel is dat deze al helemaal niet volledig gesupport worden door elk browser. Dan zou het iets worden als filter:grayscale(.5); voor 50% vergrijzing.

Reageren

Inloggen om te reageren