Faire un fond en transparence
Je pense que le titre est assez clair pour que vous imaginiez ce que l'on veut faire, malgré tout, voilà ce que je vais vous montrer comment faire.
Le texte ici présent est dans un div de couleur blanche, avec un fond d'opacité de 80%;
Le texte ici présent est dans un div et a une image de fond d'opacité 60%.
Pour une couleur
Pour une couleur, le code est extrêmement simple! En effet, il suffit d'utiliser le fait que le background-color peut être exprimée en rgba, le a étant l'opacité de la couleur. Il suffit alors de connaître le code RGB de la couleur que l'on veut utiliser, et de lui donner comme dernier élément l'opacité que l'on veut.
Voici donc les codes:
Si on a accès à la feuille CSS du forum
Dans le HTML:
- Code:
<div class="fond_transparent_blanc">Ceci est un texte, làlàlà!</div>
Dans le CSS:
- Code:
.fond_transparent_blanc {
/* N'hésitez pas à mettre d'autres style ici */
background-color: rgba(255, 255, 255, 0.8); /* Donc 0.5 = 50%, 0.8 = 80%, etc */
}
Si on est membre, à poster dans un message
- Code:
<div style="background-color: rgba(255, 255, 255, 0.8); ">Ceci est un texte, làlàlà!</div>
Pour une image
Pour une image, c'est un tout petit peu compliqué! En effet, on doit ajouter une div supplémentaire, et utiliser le pseudo-élément ":before". Cependant, je vais tetner de vous explique au mieux ce qui se passe ici!
Voici déjà le code HTML:
- Code:
<div class="conteneur"><div class="contenu">Ceci est un texte, làlàlà!.</div></div>
Si on a accès à la feuille CSS du forum
Voici le code à mettre:
- Code:
.contenteur {
/* Le position relative permet de contrôler le positionnement absolu de l'élément before. */
position: relative;
/* N'oubliez pas ici de mettre la hauteur et la largeur de l'élément, ainsi que tout autre effet de style voulu! */
}
.contenteur:before {
content: ""; /* Obligé de le mettre ou rien ne s'affichera */
/* Mettre un positionnement absolu et ensuite les 4 option de positionnement (top, bottom, left et right) à 0, permet de faire en sorte que cet élément prenne toute la LARGEUR et toute la HAUTEUR de l'élément parent, dans notre cas, le contenteur! */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* L'image de fond, bien sûr! */
background-image: url('URL_DE_L'IMAGE_ICI');
/* Le z-index est la position sur l'axe des z (donc de la profondeur) de cet élément. Ici, on le met à un pour qu'il soit derrière notre contenu. */
z-index: 1;
/* Ici on règle l'opacité d el'image de fond. 0.8 = 80%, 0.5 = 50%, etc. */
opacity: 0.6;
}
.contenu {
/* Mettre une position est obligatoire pour utiliser le z-index. Vu qu'on ne veut pas de positionnement absolu de notre texte, on le met en relatif. */
position: relative;
/* On veut bien sûr notre texte au-dessus de l'image de fond, dans ce cas, on met un z-index plus grand que celui de l'élément before */
z-index: 2;
}
Si on est membre, à poster dans un message :
Il est cependant possible que vous n'ayez pas accès à la feuille de style du forum où vous voulez poster un tel élément!
Dans ce cas il va falloir utiliser les balises style. Cependant, si vous mettez le message tel quel, vous verrez rapidement que FA prend tous les retour à la ligne en compte! Vous devez alors retirer tous les retours à la ligne.
Voilà la façon de faire :
- Code:
<style type="text/css"> CODE ICI SANS RETOUR À LA LIGNE</style>
Et voilà! =D J'espère que ce tuto vous a été utile et si vous avez la moindre question, n'hésitez pas à poster ici : https://www.never-utopia.com/f177-probleme-avec-mon-code !
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
Dernière édition par NyoTheNeko le Mar 3 Mar 2015 - 10:20, édité 2 fois
