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

您的问题是白色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>

Answer 3

请检查这是否是您想要的：

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

我认为您应该将其提供给div而不是给body提供背景图像！
同时更改rgba(255, 255, 255, 0.5)，{{ 1}}和文本margin-top:50%的{{1}}。

padding:12px

希望这会有所帮助！

Answer 6

我将C移到background-image div中，并将row类中的background-color设置回rgba(255,255,255,0.5)。我将col-md-12添加到col类中以实现效果（以突出显示 不透明 背景（255、255、255、0.5）和完全透明之一）。

希望这会有所帮助

p.s。一定要删除增加的边距。

margin:10px

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

想要使文本div在视差区域透明

6 个答案: