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

【问题标题】：Want to make text div transparent on a parallax area想要在视差区域上使文本 div 透明
【发布时间】：2019-11-13 08:18:54
【问题描述】：

我正在尝试使视差区域上的文本 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>

下部容器的背景颜色始终显示为纯色。

提前致谢！

【问题讨论】：

下部容器是 div.container-fluid 元素的子元素，其背景颜色设置为：background-color:#ffffff;背景。
我已将顶部 div 更改为：<div class="container-fluid" style="margin-top:0px;margin_bottom:0px;padding:0;margin:0"> 但还是一样
codepen.io/anon/pen/OeZOwj 对我来说是透明的
谢谢。这个问题似乎与引导程序有关。查看他们的 css 我发现 container-fluid 中有一个定义 background-color: #fff; 所以我删除了它。我看不到身体设置为白色的任何地方，但它仍然不起作用。
逛了一圈发现以前也有类似的查询，但是没有答案。 stackoverflow.com/questions/24855438/…

标签： html css alpha-transparency

【解决方案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>

【讨论】：

【解决方案2】：

请检查这是否是您要查找的内容：

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
}

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢你，但这不是我想要实现的。如果您查看codepen.io/paulomrcunha/pen/dHscj，您会看到我现在得到的。我希望文本平移的背景颜色（在该示例中）为白色（在该示例中）能够通过其不透明度进行控制，因此理论上它可以是透明的/
我在这里总是看到同样的问题：您的元素永远不会重叠，并且不可能看到不存在的元素的背景图像。要查看后面的图像，您需要将背景图像设置为父元素，而不是兄弟元素（除非您想使用绝对定位）。看这里：codepen.io/DanieleAlessandra/pen/MMPjyr
为了更清楚，这是您的示例，仅添加了彩色轮廓：codepen.io/DanieleAlessandra/pen/VJEKmo - 绿色边框是 class=image 的 div 的限制，您看不到该 div 外面的背景图像那个边界。红线是 .content 类元素的边框。

【解决方案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>

【讨论】：

【解决方案5】：

我认为，与其将 backgroud-image 给 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>

希望这会有所帮助！

【讨论】：