modififier l'opacité seulement pour le background

**Jorus** · 24/09/2004, 10h15

Salut,

mon css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
body
{
	background-image: url(test.gif);
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	Filter: Alpha(Opacity=20);
}

Comment faire sous IE pour que lorsque je veux écrire du texte dans ma page, il soit affiché normalement sans modifier son opacité.

Merci
@+
Jorus

**bartrik** · 24/09/2004, 13h25

Tu peux pas, a moins d'utiliser un div centrer au milieu de ta page ( et je suis pas certain du resulat ).
Le plus simple ne serait-il pas de modifier l'image avec un soft de retouche had'oc pour lui donner de la transparence.

**Jorus** · 24/09/2004, 15h18

merci

Dommage que l'on ne puisse pas tout faire...

@+
Jorus

**paoloadv** · 15/08/2010, 15h40

bonjour,
je n'ai pas trouvé de solution moi non plus, en CSS.
Les choses aurait-elles évolué depuis 2003 ?... ???

**paoloadv** · 15/08/2010, 16h18

Bon en fait, j'ai parlé un peu vite.
Il y a une solution.
Elle consiste à créer un bloc opaque (classe nommée "blocOpaque") dans le fichier CSS, qui prendra la taille de la fenêtre (plus ou moins avec les marges définies), et qui s'appliquera sur tout le contenu HTML.
Il faudra ensuite définir une balise <div classe="blocOpaque"> ... contenu du body de la page html </div> dans le fichier html.

Fichier CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
body { /* Pour l'image de fond... */
  background: green url('../Images/imageDeFond.jpg') no-repeat 1% 75%; 
  background-attachment: fixed; 
  filter:Alpha(opacity=94);-moz-opacity:0.94;opacity: 0.94; 
}
div.blocOpaque { /* Astuce de création d'un bloc à 60% opaque à l'image de fond */
  width:100%;
  height:100%;
  margin:0px 0px;
  background-color:#FFFFFF;
  border:1px solid black;
  filter:Alpha(opacity=80);-moz-opacity:0.80;opacity: 0.80; 
}

Fichier HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Ma page</title>
	<link rel="stylesheet" type="text/css" href="CSS/style.css">
  </head>
  <body>
    <div class="blocOpaque">
                <p>Texte de la page, images, ...</p>
		<img src="Images/image1.jpg" width="420" height="278" alt="Image1...">
	</div>
  </body>
</html>

Cette astuce permet donc de controler l'opacité de la page de premier plan sur l'image de fond choisie.

Bonne chance !

modififier l'opacité seulement pour le background

CSS

Discussions similaires

Partager

Partager