web-dev-qa-db-fra.com

Faire l'opacité dans le module l'arrière-plan, pas du texte ou des images

Comment faire pour que le texte d'un module ne soit pas affecté par l'opacité du fond blanc.

Par exemple sur cette page.

http://www.webbmaster.com.au/web-programs/questdesign/index.php/services

Dans cette page, je voudrais que le texte et les 3 images ne soient pas affectés par l'opacité, mais uniquement par l'arrière-plan blanc.

1
Kyle

Dans votre template.css, remplacez:

.servpricing {
background: #FFF;
color: #000;
opacity: 0.3;
filter: alpha(opacity=20);
}

avec:

.servpricing {
background: #fff; // Left as a fallback for older browsers
background: rgba(255,255,255,.3); // transparent white
color: #000;
}
3
Seth Warburton

vous pouvez utiliser ce css uniquement pour des arrière-plans transparents

arrière-plan: rgba (255, 255, 255, 0,7);

2

Pour avoir un fond blanc uniquement avec une opacité, utilisez ce qui suit:

background: rgba(255, 255, 255, 0.3);
background: url(../images/transparent_white.png) repeat;

255, 255, 255 sont les rgb valeurs pour le blanc et 0.3 est le niveau de transparence. J'ai également inclus une image de secours pour les navigateurs plus anciens qui ne supportent pas rgba. Si vous voulez le garder, vous devrez bien sûr créer le transparent png et éventuellement son chemin.

J'espère que cela t'aides

1
Lodder