Transparence image dans CSS [résolu]

Bonsoir,

J'ai une balise où j'ai un background-color : chemin image
et je voudrais lui appliquer un filtre alpha sur cette image.

Comment faire ?

Je sais faire une balise avec un filtre alpha pour une image présente dans ma page HTML mais pas au sein de ma page CSS.

Merci à tous pour votre aide.
Modifié par kli_online (24 Mar 2005 - 01:31)

depuis quand on défini un chemin image avec la propriété background-color ?

utilises un PNG avec couche Alpha ( ne fonctionne pas avec IE ).

pardon background-image (quel labsus )

Je voudrais éviter justement...j'ai lu un article là-dessus et comme c pas fonctionnel avec Internet Explorer (99% des navigateurs), je voudrais éviter et désolé mais moi je suis un PRO-Microsoft !!!

Merci (du coup, je crois que plus personne va vouloir me répondre sur ce forum...lol)

Tu parle du filtre alpha de IE à appliquer sur les images? Si on parle bien de la même chose il s'agit d'une fonction propriéaire de Microsoft et il n'y aucun moyen d'y accéder par une quelconque propriété CSS standard.

Ce genre de code propriétaire va justement à l'encontre du but même de ce forum qui est de promouvoir les standards (et l'accessibilité).

PS: Je ne pense pas qu'il y énormément d'anti ou pro Microsoft ici.
Modifié par jb_gfx (24 Mar 2005 - 00:50)

Je suis entièrement d'accord avec toi. Vive les includes !!
Non, je parlais plus d'un truc du genre :

.transp_img {
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Mozilla */
-khtml-opacity: 0.5; /* Safari */
opacity: 0.5; /* CSS3 */
}

à appliquer sur une balise genre cell avec attribut background-image :...

Une solution ? messieurs les pros du CSS ? à part de transformer mon image thru Photoshop ?

kli_online a écrit :
Internet Explorer (99% des navigateurs)

Hmm ça dépend des sites !

EDIT : pourrais-tu baliser tes exemples par les tag [ CODE] appropriés ? Merci
Modifié par Raphael (24 Mar 2005 - 00:58)

C'est bien ce dont je parlais, je n'avais pas pensé aux autres (moz et consort), faut dire que le HTML et le CSS sous IE semblent parfois tellement experimentaux que j'évite de passer trop de temps à explorer ces technologies ditent experimentales.. pas assez maso.

Non sinon je n'ai pas d'idée concernant ta question.

kli_online a écrit :
Je suis entièrement d'accord avec toi. Vive les includes !!
Non, je parlais plus d'un truc du genre :

.transp_img {
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Mozilla */
-khtml-opacity: 0.5; /* Safari */
opacity: 0.5; /* CSS3 */
}

à appliquer sur une balise genre cell avec attribut background-image :...

Une solution ? messieurs les pros du CSS ? à part de transformer mon image thru Photoshop ?

Par contre dans mon souvenir ces propriétés ne vont s'appliquer qu'à la seule image de fonds mais également à tout type de contenu dans une div utilisant ces propriétés par exemple.

ps: penses à [ code][ /code] (sans les espaces) pour présenter du code dans tes messages.

Désolé pour les tag [CODE], ça fait que 2 heures que je suis inscrit sur ce forum .
Bon, je crois que je vais utiliser Photoshop.

Sinon, j'ai réalisé mon 1er tableau avec div et ses amis. Ben c'est assez chouette, mise à part le fait qu'on ne voit plus rien dans Dreamweaver - ce qui était assez pratique faut reconnaitre. Par contre, j'ai un autre problème, je voudrais décaler mon texte (balise P) de quelques pixels par rapport au bord gauche. Apparemment ce n'est pas possible avec P mais avec H1 si. Me trompes-je ?

Merci Alsa...c'est quoi déjà leur slogan ?

p {
 margin-left: 1px;
}

ou

p {
 padding-left: 1px;
}

kli_online a écrit :
Désolé pour les tag [CODE], ça fait que 2 heures que je suis inscrit sur ce forum

Non, 52 minutes exactement

kli_online a écrit :
Merci Alsa...c'est quoi déjà leur slogan ?

Leur ?

@kli_online
Merci de ne pas multiplier les questions différentes dans un même post. Une question = un sujet.

Déjà deux heures et tu ne connais pas par cœur les règles du forum?

Raphael a écrit :

Non, 52 minutes exactement

Leur ?

C'est encore un mode de calcul à Dew ça

Looooooooooooooool. Vous me faites marrer!
Je sens que je vais m'y plaire ici.

En tout cas, ça fait plus de 2 heures que je suis inscrit. 1er post (ce n'est pas moi qui insiste pour parler anglais, mais ce mot est marqué partout dans le forum. Voilà une bonne chose à faire Modérateurs : traduire tous ces anglicismes en français correct ) à 20h19.

Deuxièmement, quelle est la différence entre margin-left et padding-left et left ? (est-ce qu'il faut que j'ouvre un nouveau post pour cette question Igor ? lol, je déconne)

Merci en tout cas. C'est cool d'avoir des réponses à 1h du matin. Comme je me couche pas avant 3h tous les soirs, je vais pouvoir vous harceler de questions...héhéhé
Troisièmement, je n'ai pas compris votre 'private joke' : Leur ? (raphael) C'est encore un mode de calcul à Dew ça (igor)

Zut, comment fait-on pour citer ? Ah la la ces débutants, ils nous pourrissent le forum !!!

Hop, rapidement :

kli_online a écrit :
Looooooooooooooool. Vous me faites marrer!
Je sens que je vais m'y plaire ici.

C'est aussi notre but

kli_online a écrit :
Deuxièmement, quelle est la différence entre margin-left et padding-left et left ?

margin = marge externe à l'élément
padding = marge interne à l'élément
--> http://www.openweb.eu.org/articles/dimensions_boites_css/

kli_online a écrit :

Troisièmement, je n'ai pas compris votre 'private joke' : Leur ?

"Leur" désigne un pluriel. Or je suis tout seul à m'occuper d'Alsa (sauf pour le forum bien sûr)

kli_online a écrit :
Zut, comment fait-on pour citer ?

Hmm bouton "citer" en haut à droite du post. Tu ne le vois pas ?
Modifié par Raphael (24 Mar 2005 - 01:23)

Je ne pense pas que ce soit de l'humour, tout ici appartient exclusiment à Raphaël, c'est lui Alsa. Nous ne sommes que des esclaves dont l'unique but est de servir notre maître. Donc "Leur" c'est en fait "Le sien".

D'ailleur à la prochaîne erreur du genre tu sera banni...

La padding est la marge INTERIEURE d'un élément (qui décolle le CONTENU de la limite du bloc), tandis que margin est la marge EXTERIEURE (l'espace entre la limite exterieur d'un bloc et l'element suivant). C'est clair comme explication?

Pendant qu'on est dans la dérive du sujet, quand tu estime que ton sujet est résolu tu peux éditer le titre et rajouter un [Résolu]. Le but étant de faciliter la recherche sur le forum.

Edit : Grillé
Modifié par jb_gfx (24 Mar 2005 - 01:26)

Quand je disais "Leur"...je parlais bien évidemment de la marque Alsa.
Vous savez les pubs (je m'y connais, je suis chef de pub mais sur un autre budget heureusement) Alsa avec Papi qui se comporte comme un gamin et qui fait des gâteaux en 2mn tous les 2 jours ?

Allez : VIVE LA PUB !!!*


* pas de pubs, pas de médias - pas de médias car pas d'argent qui rentre - d'où plus d'infos, donc plus de démocratie...bon je vais peut-être un peu loin là.

"Alsa les flans accessibles à tous."

Blague à part que pense tu de l'état de résolution de ton sujet? Peut on passer à autre chose?

Je n'ai pas tout saisi pour la différence entre margin et padding mais ça viendra...
Je vais éditer (résolu) mon message même si vous avez séché à ma 1ère question...


Bonne nuit.

kli_online a écrit :
Merci en tout cas. C'est cool d'avoir des réponses à 1h du matin. Comme je me couche pas avant 3h tous les soirs, je vais pouvoir vous harceler de questions...héhéhé
Troisièmement, je n'ai pas compris votre 'private joke' : Leur ? (raphael) C'est encore un mode de calcul à Dew ça (igor)

Pour citer il y a un bouton... citer en haut à droite des posts à côté du bouton éditer

Dew est le concepteur de l'application (Phédio) qui fait tourner ce forum. Tous les admins et modos ainsi que leurs missions sont présentés dans le bar du forum dans un message en "post-it" où tu trouveras également un sujet unique consacré aux présentations des nouveaux membres si tu le souhaites.

Bon maintenant que le sujet à bien dérivé, tu peux penser à rajouter un tag résolu au titre de ton sujet comme indiqué dans la Faq, oui car il y a aussi une Faq .
Modifié par Igor (24 Mar 2005 - 01:34)