Créer un cadre semi transparent.
didice-9
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
didice-9 Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
didice-9 Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
J'ai un projet à rendre en informatique (ce n'est absolument pas ma branche, donc je débute de chez débute, et ne comprends pas grand chose).
Bref, je dois construire un site sur un sujet libre, et j'aimerais faire un cadre semi transparent qui englobe mes éléments texte et photo. J'ai plusieurs pages à faire, donc j'aimerais gérer ça avec mon css.
Voici un aperçu de ce que j'ai fait :
http://img4.hostingpics.net/pics/984014imprimcransite.jpg
J'ai cherché pas mal de temps chacune des choses que j'ai réussi à mettre en place, mais pas moyen de mettre ce cadre :/
Merci d'avance pour votre aide ^^
J'ai un projet à rendre en informatique (ce n'est absolument pas ma branche, donc je débute de chez débute, et ne comprends pas grand chose).
Bref, je dois construire un site sur un sujet libre, et j'aimerais faire un cadre semi transparent qui englobe mes éléments texte et photo. J'ai plusieurs pages à faire, donc j'aimerais gérer ça avec mon css.
Voici un aperçu de ce que j'ai fait :
http://img4.hostingpics.net/pics/984014imprimcransite.jpg
J'ai cherché pas mal de temps chacune des choses que j'ai réussi à mettre en place, mais pas moyen de mettre ce cadre :/
Merci d'avance pour votre aide ^^
A voir également:
- Créer un cadre semi transparent.
- Créer un compte google - Guide
- Comment créer un groupe whatsapp - Guide
- Créer un lien pour partager des photos - Guide
- Créer un compte gmail - Guide
- Créer un compte instagram sur google - Guide
5 réponses
Bonjour,
@elgazar:
opacity va se répercuter sur les éléments enfants, l'utiliser sur un conteneur général n'est pas une bonne idée.
J'utiliserais plutot :
<div id="mon-conteneur-global" style="background:url(mon-image.jpg)">
<div id="mon-conteneur-de-contenu-de-la-page" style="background:rgba(255,255,255,.5); padding:30px">
<h1>Je met mes éléments dedans</h1>
<p> Bla bla bla ...</p>
</div>
</div>
En fait, là, tu viens créer un effet d'opacité à l'image
@didice-9:
rgba est une définition de couleur, 255 représente le blanc. Le 4eme chiffre est son niveau d'opacité, de 0 à 1 (0 à 100% de visibilité)
@elgazar:
opacity va se répercuter sur les éléments enfants, l'utiliser sur un conteneur général n'est pas une bonne idée.
J'utiliserais plutot :
<div id="mon-conteneur-global" style="background:url(mon-image.jpg)">
<div id="mon-conteneur-de-contenu-de-la-page" style="background:rgba(255,255,255,.5); padding:30px">
<h1>Je met mes éléments dedans</h1>
<p> Bla bla bla ...</p>
</div>
</div>
En fait, là, tu viens créer un effet d'opacité à l'image
@didice-9:
rgba est une définition de couleur, 255 représente le blanc. Le 4eme chiffre est son niveau d'opacité, de 0 à 1 (0 à 100% de visibilité)
avec la propriété opacity tout simplement, cela permet de varier de 0.0 (transparence totale) à 1 (aucune transparence)
Mea culpa, voila ce qui arrive quand on lit en diagonale, j'avais même pas vu que c'était pour un cadre.
Merci pour les réponses :)
à quoi correspond l'image dont tu me parles, inspiring ? J'avais déjà vu cette solution, mais c'est ce point qui me pose problème... pour le système rgba, je pense avoir compris, mais je sais pas trop où placer tout ça dans mon code...
je vais tenter avant vos explications, mais s'il me manque l'image, ça risque de ne pas marche, je crois.
à quoi correspond l'image dont tu me parles, inspiring ? J'avais déjà vu cette solution, mais c'est ce point qui me pose problème... pour le système rgba, je pense avoir compris, mais je sais pas trop où placer tout ça dans mon code...
je vais tenter avant vos explications, mais s'il me manque l'image, ça risque de ne pas marche, je crois.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question