Rechercher : dans
Par :

Besoin d'exemple (CSS + textarea + opacity)

Dernière réponse le 13 oct 2008 à 19:22:21 Edouard73, le 25 sep 2007 à 22:30:20 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP
Firefox 2.0.0.7

Meilleures réponses pour « Besoin d'exemple (CSS + textarea + opacity) » dans :
Faire une newsletter VoirFaire une newsletter Une newsletter est une lettre d'information envoyée périodiquement par mail à des abonnés. Composée de texte, illustrations, liens renvoyant vers votre site, son contenu peut être par exemple une sélection de produits, un...
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
Changer l'aspect du curseur en CSS VoirLa propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web. Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi. Exemples Liste des attributs...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Les formulaires HTML VoirIntérêt d'un formulaire Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internaute, à la manière des coupons-réponse présents dans certains...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...

1

Dalida, le 26 sep 2007 à 09:29:56

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.
[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

2

Edouard73, le 26 sep 2007 à 14:39:15

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

Répondre à Edouard73

3

spaima_zmeilor, le 2 avr 2008 à 09:33:12

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

Répondre à spaima_zmeilor

4

Edouard73, le 2 avr 2008 à 14:44:58

Coucou

voila le site : http://www.premiumwanadoo.com/...

les codes sont visibles dans source.

sur cette page il y en un peu plus : http://www.premiumwanadoo.com/...

voilou :)

Répondre à Edouard73

5

 rezman, le 13 oct 2008 à 19:22:21

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

Répondre à rezman
Collection CommentÇaMarche.net