Dev Faq
3
votes

Vous voulez rendre le texte div transparent sur une zone de parallaxe

J'essaye de rendre un texte div transparent sur une zone de parallaxe.

Voici mon code: 

<div class="container-fluid" style="margin-top:0px;margin_bottom:0px;background-color:#ffffff;padding:0;margin:0">
  <div class="row">
    <div class="col-md-12" style="background-image: url('http://localhost:8000/images/pages/parallax/1561656567.jpg');min-height: 500px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;">
    </div>
    <div class="container">
      <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;min-height:500px;background-color:rgba(255,255,255,0.1);color:#000000;">
        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>

        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>
      </div>
    </div>
  </div>
</div>

La couleur d'arrière-plan du conteneur inférieur apparaît toujours comme unie.

Merci d'avance!

6 commentaires

Le conteneur inférieur est un enfant de cet élément div.container-fluid , dont la couleur d'arrière-plan est définie: background-color: #ffffff; Le conteneur inférieur peut être transparent, mais ce que vous voyez en dessous est cet élément parent avec un arrière-plan uni.

J'ai changé le div supérieur en:

mais toujours le même

codepen.io/anon/pen/OeZOwj Cela me semble transparent

Merci. Le problème semble être quelque chose à voir avec Bootstrap. En regardant leur css, j'ai trouvé qu'il y avait une définition dans container-fluid de background-color: #fff; donc je l'ai supprimée. Je ne vois nulle part que le corps est réglé sur blanc mais cela ne fonctionne toujours pas.

En chassant, j'ai découvert que quelque chose de similaire avait déjà été interrogé, mais sans réponse. stackoverflow.com/questions/24855438/…

Vous pouvez le rendre transparent en ajoutant background: transparent; ou background: rgba (x, x, x, 0); (où x est un entier). Vérifiez ceci

5 Réponses :

0
votes

Votre problème est que le div blanc ne passe pas sur l'image, il pousse le div avec l'arrière-plan de l'image, ils ne se chevauchent pas car ce sont des frères et sœurs avec des positions relatives.

Si vous attribuez un arrière-plan d'image au conteneur vous obtiendrez le résultat que vous demandez: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="margin-top:0px;margin_bottom:0px;background-color:#ffffff;padding:0;margin:0">

      <!-- background image is here, on the row -->
      <div class="row" style="background-image: url('http://lorempixel.com/400/500/sports/');min-height: 500px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;">

        <div class="container">
          <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;min-height:500px;background-color:rgba(255,255,255,0.1);color:#000000;">
            <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
              congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>

            <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
              congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>
          </div>
        </div>
      </div>
    </div>

3 commentaires

Merci pour cela mais ce n'est pas tout à fait ce que je souhaite réaliser. Si vous regardez codepen.io/paulomrcunha/pen/dHscj , vous verrez ce que j'obtiens en ce moment. Je veux que la couleur d'arrière-plan du pan de texte qui est blanc (dans cet exemple) puisse être contrôlée via son opacité, donc en théorie, elle pourrait être transparente /

Je vois toujours le même problème ici: vos éléments ne se chevauchent jamais et il est impossible de voir l'image de fond d'un élément qui n'est pas là. Pour voir l'image derrière, vous devez définir l'image d'arrière-plan sur un élément parent, pas sur un frère (à moins que vous ne souhaitiez utiliser un positionnement absolu). Regardez ici: codepen.io/DanieleAlessandra/pen/MMPjyr

Pour être plus clair, voici votre exemple avec seulement un contour coloré ajouté: codepen.io/DanieleAlessandra/pen/VJEKmo - La bordure verte est la limite du div avec class = image vous ne pouvez pas voir l'image d'arrière-plan de ce div en dehors de cette bordure. La ligne rouge est la bordure de l'élément avec la classe .content.

1
votes

Veuillez vérifier si c'est ce que vous recherchez:

https://codepen.io / furqanrahamath94 / pen / XLxvjE

Un bloc div semi-transparent défilant avec une image fixe en arrière-plan.

Voici mes deux classes modifiées: 

.image {
    background: url(http://farm6.staticflickr.com/5104/5862419072_7f9632f068_b.jpg) no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px;
    position: fixed; // <-- Making it fixed in position
    width: 100%;
}
.content {
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 0 2rem;                     // <-- Adding padding for nicer view
    background: rgba(255, 255, 255, 0.6) // <-- Semi transparent background
}

0 commentaires
2
votes

Essayez ceci, j'espère que c'est ce que vous recherchez 

        <div class="container-fluid" style="margin-top:0px;margin_bottom:0px;background-color:transparent;padding:0;margin:0">
          <div class="row">
            <div class="col-md-12" style="background-image: url('https://cdn.shopify.com/s/files/1/0301/0065/files/fall_background_image_landscape_tree_lake_mountain_scene_web_2048x2048.jpg');min-height: 500px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;">
            </div>
            <div class="container">
              <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;min-height:500px;background-color:rgba(255,255,255,0);color:#000000;">
                <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
                  congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>

                <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
                  congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>
              </div>
            </div>
          </div>
        </div>
      body {
          background: #e5e5e5;
          padding:0px;
          margin:0px;
        }

0 commentaires
0
votes

utilise l'image d'arrière-plan sur la div parent. J'espère que cela résoudra le problème. 

<div class="container-fluid"  style="background-image: url('https://cdn.shopify.com/s/files/1/0301/0065/files/fall_background_image_landscape_tree_lake_mountain_scene_web_2048x2048.jpg');min-height: 500px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;" style="margin-top:0px;margin_bottom:0px;padding:0;margin:0">
  <div class="row">
    <div class="col-md-12">
    </div>
    <div class="container">
      <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;min-height:500px;color:#000000;">
        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>

        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>
      </div>
    </div>
  </div>
</div>

0 commentaires
0
votes

Je pense qu'au lieu de donner backgroud-image à div , vous devriez le donner au body !
Modifiez également rgba (255, 255, 255, 0.5) , margin-top: 50% et padding: 12px de texte div . 

<body style="background-image: url('https://cdn.shopify.com/s/files/1/0301/0065/files/fall_background_image_landscape_tree_lake_mountain_scene_web_2048x2048.jpg');min-height: 500px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;">
<div class="container-fluid" style="margin-top:0px;margin_bottom:0px;padding:0;margin:0">
  <div class="row">
    <div class="col-md-12" >
    </div>
    <div class="container">
      <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;min-height:500px;background-color:rgba(255,255,255,0.5);margin-top:50%;padding:12px">
        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>

        <p>Lorem ipsum dolor sit amet, nec ei illud everti pericula, cu eos labitur lucilius. Illum debet tincidunt ne cum, eu oratio melius impedit duo, ad quem ancillae quaerendum sit. Qui ne choro graecis adipiscing, vidisse petentium at mei. Quo an porro
          congue eirmod, eam an probo nihil, nominati forensibus ut eos. Has te saperet epicuri adversarium, sint cibo explicari ad cum. Vis argumentum consequuntur id, eum lorem evertitur ei, vim mollis signiferumque concludaturque ei.</p>
      </div>
    </div>
  </div>
</div>
</body>

J'espère que cela vous aidera!

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor