Хотите сделать текст div прозрачным в области параллакса

Question

Я пытаюсь сделать текстовый div прозрачным в области параллакса.

Вот мой код:

<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>

Цвет фона нижнего контейнера всегда выглядит сплошным.

Заранее спасибо!

Answer 1

Попробуйте, надеюсь, это то, что вы ищете

      body {
          background: #e5e5e5;
          padding:0px;
          margin:0px;
        }

        <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>

Answer 2

Я переместил background-image в row div и установил background-color обратно в rgba(255,255,255,0.5) в классе col-md-12.Я добавил margin:10px в класс col для эффекта (чтобы подчеркнуть разницу между непрозрачным фоном (255, 255, 255, 0,5) и полностью прозрачный один).

Надеюсь, это поможет

ps удалить добавленную маржу всеми средствами ..

body {
  background: #e5e5e5;
  padding: 0px;
  margin: 0px;
}

<div class="container-fluid" style="margin-top:0px;margin_bottom:0px;background-color:transparent;padding:0;margin:0">
  <div class="row" 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="col-md-12">
    </div>
    <div class="container">
      <div class="col-md-12" style="margin:10px;padding-top:10px;padding-bottom:10px;min-height:500px;color:#000000; background-color:rgba(255,255,255,0.5);">
        <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>

Answer 3

Я думаю, вместо того, чтобы давать фоновое изображение на div, вы должны передать его body!
Также измените rgba(255, 255, 255, 0.5), margin-top:50% и padding:12px текста 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>

Надеюсь, это поможет!

Answer 4

использовать фоновое изображение на родительском div.Надеюсь, это решит проблему.

<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>

Answer 5

Пожалуйста, проверьте, если это то, что вы ищете:

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

Прокручиваемый полупрозрачный блок div с фиксированным изображением на заднем плане.

Вот мои модифицированные два класса:

.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
}

Answer 6

Ваша проблема в том, что белый div не проходит по изображению, он выдвигает div с фоном изображения, они не пересекаются, поскольку они являются родственными элементами с относительными позициями.

Если вы назначаете изображениефон для контейнера вы получите результат, который вы просите:

<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>