Background semi-transparent

Résolu/Fermé
Signaler
Messages postés
54
Date d'inscription
lundi 20 juin 2011
Statut
Membre
Dernière intervention
21 avril 2014
-
Messages postés
54
Date d'inscription
lundi 20 juin 2011
Statut
Membre
Dernière intervention
21 avril 2014
-
Bonjour,

J'ai cherché pas mal de temps sur Internet pour savoir comment teinter mon background pour qu'il ne soit pas totalement transparent mais je trouve de réponse nulle-part.

Je voudrais savoir comment rendre mon background transparent mais pas totalement (teintée en noir). En effet, mon image de fond contient des nuances de blancs qui nuisent à la lecture de mon texte (si je change de couleur ça fait moche). De ce fait, si je rend mon background semi-transparent, ce problème serait arrangé.

Voici une page web utilisant ce background pour que vous ayez une idée :

https://assassinscreed.fandom.com/fr/wiki/Erudito

Merci.
A voir également:

4 réponses

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
706
Bonjour
En fait dans la page que tu donne ce n'est pas le background qui est transparent mais la couleur du background des élément au dessus

voici un exemple de code
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>

<div id="page">
<!---- contenu page--->
</div>

<body>
</html>

le CSS style.css

html {
margin:0;
padding:0;
background: url(image.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}

#page {
width: 960px;
height: auto;
background: #FFFFFF;
filter:alpha(opacity=80); /* IE */
-moz-opacity:0.8; /* Firefox */
opacity: 0.8; /* standard CSS3 */
-khtml-opacity: 0.8; /* Konqueror */
}

2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
54
Date d'inscription
lundi 20 juin 2011
Statut
Membre
Dernière intervention
21 avril 2014

En effet, j'ai mis "transparent" comme couleur, c'est pour ça que ça marchait pas mais quand j'ai changé en "Black" 'est bon !

Merci beaucoup l'ami !
Messages postés
54
Date d'inscription
lundi 20 juin 2011
Statut
Membre
Dernière intervention
21 avril 2014

Ah j'ai un petit soucis aufait :/

L'opacité à bien marché mais ça affecte aussi la police or je voulais que le background...
Et j'avais crée un menu déroulant qui se trouve au dessus de mon corps mais quand le menu se déroule, il va en dessous de ma <div id="corps"> et c'est assez gênant :(

N'auriez vous pas une solution s'il vous plait ?

Voici mon code html pour vous donner une idée : <>html>


<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<header>
<!---- mon menu déroulant ---->
</header>

<div id="corps">
<section>
<!---- contenu de mon corps>
</section>
</div>

</body>
</html>

Voici mon code css:

#corps {
background:black;
width:850px;
margin:200px 174px;
height:2000px;
border-radius:4px;
border:2px white solid;
float:left;
opacity:0.7;
filter:alpha;
}

section {
width:750px;
margin:20px auto 30px auto;
height: 500px;}


Merci
Messages postés
54
Date d'inscription
lundi 20 juin 2011
Statut
Membre
Dernière intervention
21 avril 2014

Problème résolu !

Voilà comment j'ai fais (pour les gars qui sont dans le meme problème que moi)

Pour régler le problème du menu déroulant j'ai utilisé la fonction : z-index

Concernant l'opacité, j'ai juste supprimer "opacity" et l'ai remplacée par "background-color: rgba(0, 0, 0, 0.8);"

Voilà