28172 sujets

CSS et mise en forme, CSS3

[RÉSOLU] Changer l'opacité d'une cadre, sans son texte

Salut,
je tente depuis quelque temps de mettre sur pieds mon blog (http://laminae.free.fr/), comme vous le voyez sur Spip.
Vu que je débarque totalement en CSS, je me suis bien amusé, mais là, je calle !
J'ai en fait appris par hasard la fonction "opacity" qui permettait de gérer la transparence de mes cadres. Comme vous le voyez sur le site, j'ai pas hésité, mais arrive un problème de visibilité ; j'aimerais donc que la transparence agisse sur les fonds sans affecter le texte (là, la transparence englobe tout !).

Actuellement : #page { position: relative; width: 58em; margin: 0 auto; text-align: left; opacity:0.7; }
#page correspondant à tout, sauf au background en fait ^^
Faudrait-il appliquer le code différemment ? Ou utiliser une autre fonction ?

Merci d'avance Smiley sweatdrop


Solution : utiliser la propriété RGBa plutôt que opacity. ...Si ça ne fonctionne pas, vérifier la version de son navigateur ! Smiley lol

Merci à Corinne, Ladytron !
Modifié par Otyugh (12 Apr 2010 - 23:38)
Bonjour et bienvenu sur le forum, Smiley smile

La propriété opacity affecte l'élément ciblé ainsi que tous ses descendants.
La propriété qui correspond à l'effet voulu est RGBa.
#conteneur { clear: both; float: left; width: 67%; overflow: hidden; background-color: rgba(255, 255, 255, 0.5); }

Beuh, ça ne fonctionne pas ? Ou Firefox v3 est trop mauvais élève ? (je suis sur PowerPC, je ne puis donc pas installer au-dessus ^^)

Vous voyez de la transparence blanche, vous ? http://laminae.free.fr/
(au début, j'avais mis le code aussi en rgb parce qu'ils le conseillait, mais bon... Si je ne puis pas moi-même profiter de mon site, où va le monde ? Pis j'ai ptéte fait une faute con ?) Smiley langue
Je vois bien la transparence blanche, aucun souci sur FF 3.6.3, Safari 4, Opera 10.51 PC Smiley smile

PS : pas de souci à noter sur FF 3.6.3 sous Snow Leopard/x86
Je suis scié... Ce qui ne marchait ni sur Opera ni sur FF, marche sans problème sur Safari !
Soit j'ai pas les dernières versions, soit c'est bien la première fois que je vois Safari en avance Smiley murf

Voilà qu'est embarrassant pour moi, vu que je risque d'être le seul à ne pas pouvoir profiter de ce fantastique dégradé ^^'

Ben merci du coup, vous êtes supers ! Réactifs et constructifs (=
Merci, Otyugh ! On est là pour ça Smiley lol

Par contre, il y a une chose qui m'étonne à propos des versions de FF pour OSX/PPC : comment se fait-ce que tu ne puisses pas mettre la toute dernière version (3.6.3) ? La dernière version est pourtant un binaire universel, si je ne m'abuse ?
En fait, il s'agit plutôt de ma version de mac. Je suis sur un PowerPC 10.3.9
Hors, le dernier firefox roule sur ;
* Mac OS X 10.5 Intel
* Mac OS X 10.5 PPC
* Mac OS X 10.4 Intel
* Mac OS X 10.4 PPC

C'est pas qu'ils font pas d'effort ; c'est surtout que ces dinosaures de macs qui sont increvables ! Mon papa avait cet ordi avant pendant des années, et... Ben il tient toujours le coup ! (et je suis plutôt un gros utilisateur, pourtant) Smiley biggol
Haaa ça… A moins de les écrabouiller avec un rouleau compresseur, c'est increvable.
On va considérer ton problème comme résolu. Smiley lol (n'oublie pas le "[RESOLU]" dans le titre du sujet)
Toujours sur Power-PC version 10.4.11 (à peine plus haut que la tienne). Me contacter sur aureance.blue@laposte.net.
Argh, petit rappel tristounet ; si ça fonctionne bien désormais chez-moi (sur FireFox 2.0 je vois un fond 100% blanc parce qu'il ne gère pas rgba, et Safari affiche normalement)... Il apparaît que les gens sur Internet Explorer (8?) ne voient pas de fond dutout, et ont donc qu'un texte noir sur la végétation du background.
C'est pas normal ! Pourquoi est-ce qu'ils n'ont pas au moins le fond blanc uni, si IE8 ne gère pas rgba ?
Donc du coup, je ne vois pas trop comment arranger ce binzouin Smiley biggol

Rappel de l'adresse : laminae.free.fr
Rappel du code utilisé (les deux à la suite) :
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.5);

L'ordre est-il important en CSS au fait ? Smiley murf
Otyugh a écrit :
L'ordre est-il important en CSS au fait ? Smiley murf

Oui, la deuxième déclaration écrase la première. Si tu les inverse, tout le monde aura une couleur de fond opaque. Smiley smile
C'est la bonne manière de faire, par contre il semblerait qu'il y ait un problème spécifique à IE 6 et 7 (corrigé dans IE8). Avec un moyen d'éviter ce bug, mais qui a ses limites.

J'ai consigné quelques infos ici (mis à jour d'une vieille page de test):
http://covertprestige.info/css/couleurs-rvba/
Modifié par Florent V. (14 Apr 2010 - 22:44)
[Cri du cœur sans rapport: Mais pourquoi les gens que je côtoie (des gens intelligents en plus !) utilisent Internet explorer m'enfin !]

Merci pour ta réponse, ainsi que le tuto que j'ai dégusté avec joie (y sont franchement bien fait !) !
Je vais tenter background plutôt que background-color pour voir, dommage que je puisse pas tester de suite l'efficacité du changement, n'ayant qu'un IE pour mac vieillot...

Enfin, d'après toi le bogue de la "deuxième déclaration qui tue la première" est absent de IE8... Alors c'est pas logique ! On va bien voir ce que mes amis windowsiens voient Smiley langue

Encore une fois... Merci ! (ça coûte pas cher, donc j'arrose Smiley lol )
Les gens sur Internet Explorer ne voient toujours rien !
C'est bizarre, tandis que ça fonctionne parfaitement sur FF... Toute version !
Si quelqu'un à le tuyau magique... Je l'veux ! (ou à défaut, il y aurait pas un moyen d'avoir des aperçut de IE en temps réel sans avoir IE ? comme ça je pourrais bidouiller le code jusqu'à-ce que ça marche °o°) Smiley fache
Sujet clos
Aller à