Voile assombrissant
Résolu
Cartman
-
cartman1706 Messages postés 282 Date d'inscription Statut Membre Dernière intervention -
cartman1706 Messages postés 282 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je suis en train de creer mon forum, et je voudrais que pour l'affichage de chaque posts, le fond (du tableau contenant le post) soit legerement assombrit.
car j'ai un fond de page qui contient des motifs et mettre du texte dessus rend sa lecture difficile.
n'y a t-il pas de solution CSS pour mettre ce "voile assombrissant" seulement sur le tableau ??
Merci
je suis en train de creer mon forum, et je voudrais que pour l'affichage de chaque posts, le fond (du tableau contenant le post) soit legerement assombrit.
car j'ai un fond de page qui contient des motifs et mettre du texte dessus rend sa lecture difficile.
n'y a t-il pas de solution CSS pour mettre ce "voile assombrissant" seulement sur le tableau ??
Merci
16 réponses
En utilisant le CSS et une image PNG, il y a moyen de faire ce que tu demande :
avec voile.png qui est une image noir qui a une certaine transparence (en couche alpha).
Sous IE c'est plus compliqué :
table.post {
background: url(voile.png);
}
avec voile.png qui est une image noir qui a une certaine transparence (en couche alpha).
Sous IE c'est plus compliqué :
table.post {
background: progid:DXImageTransform.Microsoft.AlphaImageLoader (voile.png, sizingMethod='image');
}
ok, donc si j'ai bien compris, je prend une image noir (toute noire) puis je lui applique un filtre Alpha (pour la rendre un peut transparante) puis dans mon tableau, je met la classe "table.post" de facon a ce que ce tableau ait comme image de fond cette image.
est ce bien ca ?
est ce bien ca ?
A peu de chose près c'est ca :
- l'image ne sera pas forcément noir, un gris peu être mieux
- la couche alpha, faut la mettre avec ton utilitaire de dessin (perso j'utilise paint shop pro )
- tu met pas la class "table.post" à la table mais simplement "post"
- l'image ne sera pas forcément noir, un gris peu être mieux
- la couche alpha, faut la mettre avec ton utilitaire de dessin (perso j'utilise paint shop pro )
- tu met pas la class "table.post" à la table mais simplement "post"
OK,
ca marche.
Mes craintes sont plutot du coté de l'application "Paint shop pro" que je ne connais pas du tout.
j'ai l'habitude de travailler sous adobe 1ere mais pas sur des images fixes.
crois tu que je peux faire cette image sous Paint ?
Si oui ou non, Comment ?
Est il obigatoire que cette derniere soit en PNG et pourquoi ?
ca marche.
Mes craintes sont plutot du coté de l'application "Paint shop pro" que je ne connais pas du tout.
j'ai l'habitude de travailler sous adobe 1ere mais pas sur des images fixes.
crois tu que je peux faire cette image sous Paint ?
Si oui ou non, Comment ?
Est il obigatoire que cette derniere soit en PNG et pourquoi ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Tu peut pas la faire sous paint, il ne gere pas se que l'on appelle la couche "Alpha".
Dans une image normal (bitmap), tu as trois couches, une pour définir le rouge, une pour le vert et une pour le bleu. Avec la couche alpha, tu ajoute un niveau de transparence.
Faut-il quel soit en PNG ? Il vaut mieux car c'est l'un des format le mieux reconnnu sur les navigateur et qui gere la couche alpha. Le JPG ne gere pas la transparence et le GIF ne gere que la transparence total.
(Au fait attention à la méthode pour IE, je suis pas 100% sur quel fonctionne correctement)
Dans une image normal (bitmap), tu as trois couches, une pour définir le rouge, une pour le vert et une pour le bleu. Avec la couche alpha, tu ajoute un niveau de transparence.
Faut-il quel soit en PNG ? Il vaut mieux car c'est l'un des format le mieux reconnnu sur les navigateur et qui gere la couche alpha. Le JPG ne gere pas la transparence et le GIF ne gere que la transparence total.
(Au fait attention à la méthode pour IE, je suis pas 100% sur quel fonctionne correctement)
Pas vraiment, tu créer une image de 1px par 1px. Tu lui met une couleur de ton choix (sombre a priori).
Tu choisie l'outil gomme, tu vas dans la fenetre de configuration de l'outil, là tu doit avoir un champs qui correspond à la transparence que tu met à 50 pour tester, t'en profitte pour mettre la taille de la gomme à 1.
Tu clique sur ton pixel est normalement il doit être légérement transparent.
Apres tu fait fichier > exporter > PNG optimisé (si je me souvient bien)
tu vas dans l'onglet transparence et tu coche "transparence d'une couche alpha" et tu enregistre.
Tu choisie l'outil gomme, tu vas dans la fenetre de configuration de l'outil, là tu doit avoir un champs qui correspond à la transparence que tu met à 50 pour tester, t'en profitte pour mettre la taille de la gomme à 1.
Tu clique sur ton pixel est normalement il doit être légérement transparent.
Apres tu fait fichier > exporter > PNG optimisé (si je me souvient bien)
tu vas dans l'onglet transparence et tu coche "transparence d'une couche alpha" et tu enregistre.
1px/1px ! ! ! c'est tout petit ! en fait c'est le meme px qui va se repeter en fond sur toute la taille du tableau ! ??
pas besoin donc de faire une grande image qui prendrait a elle seule toute la taille du tableau.
pas besoin donc de faire une grande image qui prendrait a elle seule toute la taille du tableau.
Non, pas besoin, ainsi, ton image de 1px/1px peut servir dans tout les cas de taille possible pour ton tableau.
Re-Salut !
Hier j'ai fais ce que tu m'a dis, mais pas moyen d'avoir un resultat !
ne donne rien !
et
ne marche qu'avec des ".jpg" !
de plus je n'ai pas trouvé la foncion transparence avec "Paint Shop Pro 9" .....
Help me please .....
Hier j'ai fais ce que tu m'a dis, mais pas moyen d'avoir un resultat !
table.post {
background: progid:DXImageTransform.Microsoft.AlphaImageLoader (voile.png, sizingMethod='image');
}
ne donne rien !
et
table.post {
background: url(voile.png);
}
ne marche qu'avec des ".jpg" !
de plus je n'ai pas trouvé la foncion transparence avec "Paint Shop Pro 9" .....
Help me please .....
Pour ca j'en suis pas sur, j'ai repris sur un code existant que j'ai modifié :
Quand a ca :
Si ca marche avec des JPEG, ca devrait aussi marcher avec des PNG. Je sais pas pourquoi ca marche pas.
Sinon, pour Paint shop pro, j'utilise le 7, mais il doit pas y avoir une grande différence : est ce qu'il y a une fenetre de configuration de l'outil ? Si oui il y a quoi comme champs a remplir ?
Au fait tu utilise quel navigateur ????
table.post {
background: progid:DXImageTransform.Microsoft.AlphaImageLoader (voile.png, sizingMethod='image');
}
Quand a ca :
table.post {
background: url(voile.png);
}
Si ca marche avec des JPEG, ca devrait aussi marcher avec des PNG. Je sais pas pourquoi ca marche pas.
Sinon, pour Paint shop pro, j'utilise le 7, mais il doit pas y avoir une grande différence : est ce qu'il y a une fenetre de configuration de l'outil ? Si oui il y a quoi comme champs a remplir ?
Au fait tu utilise quel navigateur ????
j'utilise IE.
mais pour ce qui est de Paint shop, il y a bien une fenetre de de config mais y'a null part marqué "transparence" ou "alpha", j'ai donc cree une image de 1px sur 1px (tout petit !) j'ai zoomé en *5000 pour y voir quelque chose, j'ai colorié ce pixel² d'une certaine couleur.
ensuite ne voyant pas le parametre "transparence", j'ai joué sur d'autre parametres du genre "opacité" ... mais rien a faire !
alors j'ai essayé simplement d'enregistré ce pixel en ".png" et l'afficher en fond sans effet de transparence. mais rien a faire, ca ne donne rien.
mais pour ce qui est de Paint shop, il y a bien une fenetre de de config mais y'a null part marqué "transparence" ou "alpha", j'ai donc cree une image de 1px sur 1px (tout petit !) j'ai zoomé en *5000 pour y voir quelque chose, j'ai colorié ce pixel² d'une certaine couleur.
ensuite ne voyant pas le parametre "transparence", j'ai joué sur d'autre parametres du genre "opacité" ... mais rien a faire !
alors j'ai essayé simplement d'enregistré ce pixel en ".png" et l'afficher en fond sans effet de transparence. mais rien a faire, ca ne donne rien.
"opacité" c'est bien ca !
Et tu dit qu'en changeant l'opacité lors de l'utilisation de la gomme il n'y a rien qui change ? C'est bizarre ca.
Tu as bien une version de IE superieur à 5.5 ?
Et tu dit qu'en changeant l'opacité lors de l'utilisation de la gomme il n'y a rien qui change ? C'est bizarre ca.
Tu as bien une version de IE superieur à 5.5 ?
Sinon, essaye de regarder sur cette page :
http://www.toutjavascript.com/main/search.php3?note=123456
Il y a un script pour gérer la couche alpha (mais que sous IE 5.5 et +). Regarde donc si tu arrive a trouvé ton bonheur.
http://www.toutjavascript.com/main/search.php3?note=123456
Il y a un script pour gérer la couche alpha (mais que sous IE 5.5 et +). Regarde donc si tu arrive a trouvé ton bonheur.
