High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Transparance du fond uniquement

Dernière réponse le 7 fév 2008 à 21:52:26 Olovoo, le 29 oct 2007 à 17:28:12 
 Signaler ce message aux modérateurs

Bonjour,
cela fait des heures que je cherche peut etre que je n'es pas bien chercher ^^ En tout cas je n'ai toujours pas trouver de solution qui me s'attisface. Voici mon probleme:
J'ai une image et une image de fond, (ou un texte et une image de fond), l'image de fond doit etre semi-transparante(à environs 50%) [il s'agit en faite d'un rectangle arrondi de couleur] et l'autre image ou le texte doit etre opaque à 100%!! Mais voila le probleme c'est que en CSS quand je met "opacity: 0.500" ca l'applique à mon image de fond et mon image ou mon texte J'ai déja chercher, j'ai notamment essayer "background-opacity:0.500 "
Quelqu'un aurai-t-il une balise du même genre ?? Ou une idée ?? Merci d'avance

Logiciel: Kompozer mais je me débrouille aussi avec Bloc-note

Configuration: Windows 98
Firefox 2.0.0.8

Meilleures réponses pour « Transparance du fond uniquement » dans :
Fond d'écran "aquarium " gratuit VoirChoisir la bonne résolution pour le fond d'écran Télécharger un fond d'écran d'aquarium à partir de Google images Télécharger un fond d'écran d'aquarium sur un site d'images De nombreux sites permettent de télécharger gratuitement des...
Fond d’écran de Noël VoirPour illustrer la magie du moment - la magie de Noël - personnalisez votre ordinateur ou votre téléphone portable avec un fond d’écran de Noël ! Un fond d’écran de Noël pour votre ordinateur Choisir un fond d’écran de Noël Composer votre...
Changer de fond d'écran VoirPour Windows XP et versions antérieures Pour Windows Vista Obtenir des fonds d'écran Solution plus rapide Comment changer l'arrière-plan du Bureau ? Un fond d'écran est une image utilisée en arrière-plan de votre bureau. Lors d'une...
Posez votre question Répondre

1

Pitch@n, le 29 oct 2007 à 17:36:19

Salut ,

Je ne sais pas si j'ai bien tout compris mais pourquoi pas modifier l'opacité de ton image et la mettre en png ou gif pour conserver la transparance ?

Le bloc note c'est bien, notepad++ c'est mieu :)

by

   
Répondre à Pitch@n

2

Gihef, le 29 oct 2007 à 22:08:07

Bonjour,

Moi non plus, je ne comprends pas bien.
Un fond semi-transparent.
Pour quoi faire ? Qu'est-ce qu'il y a à voir sous le fond ? Le sous-fond ?

Quant au gif, c'est visible ou transparent, sans nuances.
Et le png n'est pas apprécié par tous les navigateurs.

Alors, essaye de voir opacity.
À quoi tu pourrais ajouter “-khtml-opacity: 0.1;” si Konqueror fait partie des navigateurs à qui tu t'adresses.

Applique ça au bon élément.

Pourvu que ça te satisfasse…

--

   
Répondre à Gihef

3

Gihef, le 29 oct 2007 à 23:11:29
  • +3

Un exemple ?

Teste ça :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #b0c4de;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      width: 760px;
      height: 400px;
      background-color: #f5f0f0;
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      font-size : 1.2em;
      font-weight : bold;
      color : #000080;
      }
    div#transparente {
      filter:alpha(opacity=70);   /* IE */
      -moz-opacity:0.7;           /* Firefox */
      opacity: 0.7;               /* standard CSS3 */
      -khtml-opacity: 0.7;        /* Konqueror */
      position: absolute;
      top : 0;
      left : 0;
      background-color : #ffa500;
      width: 382px;
      height: 280px;
      }
    div#pastransparente {
      filter:alpha(opacity=100);  /* IE */
      -moz-opacity:1;             /* Firefox */
      opacity: 1;                 /* standard CSS3 */
      -khtml-opacity: 1;          /* Konqueror */
      position: absolute;
      top : 227px;
      left : 65px;
      padding : 20px;
      border : 1px solid #00ff00;
      }
    </style>
</head>
<body>
  <div id="conteneur">
    <p><br><br><br>Ce texte est en-dessous.</p>
    <div id="transparente">
    </div>
    <div id="pastransparente">
      <p>Ce texte est au-dessus.</p>
    </div>
  </div>
</body>
</html>

Et puis, à y réfléchir, même sans
    div#pastransparente {
      filter:alpha(opacity=100);  /* IE */
      -moz-opacity:1;             /* Firefox */
      opacity: 1;                 /* standard CSS3 */
      -khtml-opacity: 1;          /* Konqueror */
ça devrait marcher.

--

   
Répondre à Gihef

4

Olovoo, le 30 oct 2007 à 11:52:35

Je n'es pas encore eu le temps de regarder toute vos réponces dans le détails mais je vous remerci beaucoup de m'avoir accorder un peu de votre temps, en faire je m'explique mieu j'ai le fond de ma page web qui est une image qui est pas endroit noir, à d'autre endroit rouge ou encore jaune. je veux en faite mettre un fond sous mon texte pour que l'on voir bien ce qu'il y est écrit mais je veux que l'on sot comme même mon image de fond d'ou la semi-transparance. voila j'espere avoir été un peu près clair, je vais me pencher sur vos solutions et merci encore

   
Répondre à Olovoo

5

meuhlol, le 30 oct 2007 à 13:39:39

Comme l'a dit Gihef (+1)
tu gères ton image par exemple en y rajoutant: 

style="filter:alpha(opacity=50);" /* ca va faire 50% visible sous IE */

"La liberté n'est pas l'absence d'engagement, mais la capacité de choisir" © Paulo Coelho

   
Répondre à meuhlol

6

Olovoo, le 30 oct 2007 à 14:08:43

Merci beaucoup pour vos réponces je viens enfin d'arriver à faire ce que je voulais, Merci surtout à Gihef pour son exemple qui repond exactement à mon problème.

   
Répondre à Olovoo

7

Gihef, le 1 nov 2007 à 02:07:01
  • +2

Content que tu sois satisfait.

Cependant, ça peut demander quelques explications.

J'ai mis une nouvelle version en ligne.

Dans l'exemple du haut, la “<div class="pastransparente">” est dans la “<div class="transparente">”.
Elle en hérite donc les spécificités et son opacité est modifiée.
L'image et le texte sont donc estompés.
J'ai rétabli la “opacity: 1;” pour montrer que cet héritage est permanent.

Dans le 2e exemple, la “<div class="pastransparente">” est hors de la “<div class="transparente">”.
Elle ne subit donc plus les spécificités de la “transparente”.
L'image et le texte sont opaques.
J'ai utilisé un positionnement en absolute pour pouvoir la placer sur la “transparente”.

--

   
Répondre à Gihef

8

juste de passage !, le 11 déc 2007 à 23:38:14

La nouvelle version est super claire .. merci pour le coup de main .. on peu faire ca dans un tableau (-> avoir le fond du tableau avec une opacité 50%environ et le texte net ?) . merci

   
Répondre à juste de passage !

9

Gihef, le 12 déc 2007 à 00:41:00

Bien sûr.

Comment ferais-tu ?


++
Rappel : la “<div class="pastransparente">” est hors de la “<div class="transparente">”… utilisé un positionnement en absolute

--

   
Répondre à Gihef

10

 logical, le 7 fév 2008 à 21:52:26

Je veux refaire mon blog je veux que le fond soit noir avec une image et que l'écriture soit transparente voila le modèle de blog qui m'avait plu Accéder à ses fichiers depuis n'importe où malheureusement je ne connais pas le code de cette ecrriture transparente je n'ai aps compris comment la faire
merci de vuloir m'aider
the logic is the best key

   
Répondre à logical
Posez votre question Répondre
Ils ont besoin de votre aide