Sujet Précédent Sujet Suivant

Transparance du fond uniquement

Fermé
Olovoo Messages postés 5 Date d'inscription lundi 29 octobre 2007 Statut Membre Dernière intervention 29 janvier 2008 - 29 oct. 2007 à 17:28
 Pouet - 27 juin 2011 à 13:59
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

11 réponses

Réponse 1 / 11
Pouet
27 juin 2011 à 13:59
Il y a très simple :

Rajouter un canal alpha à la couleur de fond, qui détermine la transparence

background-color : rgba(200,200,200,0.5)
27
Réponse 2 / 11
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
29 oct. 2007 à 23:11
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.

--
7
Réponse 3 / 11
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
1 nov. 2007 à 02:07
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”.

--
3
Réponse 4 / 11
Max
23 juin 2010 à 16:17
Le seul problème c'est qu'on soit obligé d'utiliser la propriété position.
C'est un peu dommage.
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
Pitch@n Messages postés 222 Date d'inscription jeudi 30 août 2007 Statut Membre Dernière intervention 1 août 2013 66
29 oct. 2007 à 17:36
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
0
Réponse 6 / 11
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
29 oct. 2007 à 22:08
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…

--
0
Réponse 7 / 11
Olovoo Messages postés 5 Date d'inscription lundi 29 octobre 2007 Statut Membre Dernière intervention 29 janvier 2008
30 oct. 2007 à 11:52
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
0
Réponse 8 / 11
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
30 oct. 2007 à 13: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 */
0
Réponse 9 / 11
Olovoo Messages postés 5 Date d'inscription lundi 29 octobre 2007 Statut Membre Dernière intervention 29 janvier 2008
30 oct. 2007 à 14:08
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.
0
Réponse 10 / 11
juste de passage !
11 déc. 2007 à 23:38
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
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
12 déc. 2007 à 00:41
Bien sûr.

Comment ferais-tu ?


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

--
0
Réponse 11 / 11
logical Messages postés 27 Date d'inscription vendredi 15 juin 2007 Statut Membre Dernière intervention 7 février 2008 6
7 févr. 2008 à 21:52
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
0

Discussions similaires

Fond d'écran rogné et zoomé
DeeJay-TheBot -
DeeJay-TheBot -

2 réponses
Fond d'écran qui devient noir
DjBuRnOuT -
alhuno1 -

6 réponses
iPhone : réduire une photo pour la mettre en fond d'écran
Missbla -
Thom44540 -

3 réponses
Taches de fond Windows inutiles.
dreamcatcher -
am -

7 réponses
Pourquoi mon portable affiche "Appel d'urgence uniquement"
sebgool -
Mouchi -

61 réponses