Background semi-transparent
Résolu
PeterJackson17
Messages postés
67
Statut
Membre
-
PeterJackson17 Messages postés 67 Statut Membre -
PeterJackson17 Messages postés 67 Statut Membre -
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.
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.
4 réponses
-
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 */
}
-
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 ! -
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 -
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à
