Background semi-transparent
Résolu
PeterJackson17
Messages postés
54
Date d'inscription
Statut
Membre
Dernière intervention
-
PeterJackson17 Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
PeterJackson17 Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
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.
A voir également:
- Opacité background-image css
- Opacity background image css - Meilleures réponses
- Image opacity css - Meilleures réponses
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
- Image gratuite - Guide
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 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 !
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
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