Besoin d'exemple (CSS + textarea + opacity)

Résolu/Fermé
Edouard73 Messages postés 139 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 2 avril 2013 - 25 sept. 2007 à 22:30
 rezman - 13 oct. 2008 à 19:22
Bonjour à tous :)

Apres quelques heures de recherches infructueuses sur le net et dans un ultime espoire je viens demander de l'aide mais surtout des exemples.

Voila j'utilise un gif animé pour l'arrier plan de mes textarea via CSS. dont voici l'exemple :

p {
}
textarea {
font-family:arial, sans-serif;
font-size:100%;
width:100%;
background-color:transparent;
color:black;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
background-image:url(../../../IMAGE%20FORUM/LISTEDESMEMBRES/tabbg.gif);
}

Le probleme avec les gif animés et d'apres ce que j'ai pu lire, il n'est pas possible de rendre l'arrier plan opaque. J'ai donc trouvé une solution qui me permet avec CSS de rendre le .gif opaque à 50% (je n'utilise pas mng pour cause de compatibilité firefoxe et... je n'ai pas d'éditeur)

filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

Mon soucie est que cette fonction rend aussi le text qui se trouve dans le textarea. C'est donc ici que j'aurai besoin d'exemples pour me permetre de rendre uniquement l'image en background de mes textarea opaque.

Dans l'attente d'une ame bien charitable
Bonne soirée à toutes et à tous
Edouard73
A voir également:

2 réponses

spaima_zmeilor
2 avril 2008 à 09:33
Salut, Est ce que je peux avoir l'adresse de ton site où tu as utilisé la transparence en CSS? Je vodrias faire des pages avec des poemes en francais et roumain sur un fond de livre ouvert et que l'ecriture se pose sur les pages ouverts du livre
Merci d'avance
0
Edouard73 Messages postés 139 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 2 avril 2013 11
2 avril 2008 à 14:44
coucou

voila le site : https://actualite-premium.fr/

les codes sont visibles dans source.

sur cette page il y en un peu plus : https://actualite-premium.fr/

voilou :)
0
rezman > Edouard73 Messages postés 139 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 2 avril 2013
13 oct. 2008 à 19:22
Salut

tu peux aussi passer par des background-position:

par exemple:
body{
	background:url("fond.gif");
}
#content{
	margin-right:auto;
	margin-left:auto;
	float:right;
	width:900px;
	background:url('fond.png');
	background-attachment:fixed;
	background-position:0px 0px;
	border:2px black solid;
	background-color:white;
	/*background:url("milieu.gif");
	background-repeat:repeat-y;*/
	text-align:center;
}

ou fond.png est la meme image que fond.gif mais avec une opacité à 0.6.
et cela marche pour IE et Firefox

++

chris
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
26 sept. 2007 à 09:29
salut,

et si tu mettais ton gif dans une autre balise comme un '<div>' (placée avant mais ne contenant pas le '<textarea>') et que par positionnement tu viennes mettre ton '<textarea>' au dessus.

le '<div>' accueille le gif et il est semi-opaque.
le '<textarea>' a un fond transparent et un texte normal.
il vaut mieux essayer sans qu'il se contiennent, j'ai peur de l'héritage.
-1
Edouard73 Messages postés 139 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 2 avril 2013 11
26 sept. 2007 à 14:39
Salut Dalida.

finalement apres avoir tester diver truc c'est ce que j'ai fais :

<div id="ANIMATION12" style="position:absolute; left:82px; top:218px; z-index:1; width: 113px; height: 113px;">
<img src="../../../IMAGE%20FORUM/LISTEDESMEMBRES/annim003.gif" width="113" height="113" style="filter:alpha(opacity=25);-moz-opacity:0.25">
</div>

J'ai mis l'animation gif en calque sur le text area avec opacity 25% ça fait exactement ce que je voulais.

hihi

Merci pour la réponse :)
@bientot
0