Sujet Précédent Sujet Suivant

Background semi-transparent

Résolu/Fermé
PeterJackson17 Messages postés 54 Date d'inscription lundi 20 juin 2011 Statut Membre Dernière intervention 21 avril 2014 - Modifié par PeterJackson17 le 9/11/2013 à 18:10
PeterJackson17 Messages postés 54 Date d'inscription lundi 20 juin 2011 Statut Membre Dernière intervention 21 avril 2014 - 9 nov. 2013 à 22:08
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

Réponse 1 / 4
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
9 nov. 2013 à 19:31
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
Réponse 2 / 4
PeterJackson17 Messages postés 54 Date d'inscription lundi 20 juin 2011 Statut Membre Dernière intervention 21 avril 2014
9 nov. 2013 à 19:41
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 !
0
Réponse 3 / 4
PeterJackson17 Messages postés 54 Date d'inscription lundi 20 juin 2011 Statut Membre Dernière intervention 21 avril 2014
Modifié par PeterJackson17 le 9/11/2013 à 19:58
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
0
Réponse 4 / 4
PeterJackson17 Messages postés 54 Date d'inscription lundi 20 juin 2011 Statut Membre Dernière intervention 21 avril 2014
9 nov. 2013 à 22:08
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à
0