视差图像顶部的透明文本 div答案

【问题标题】：transparent text div on top of parallax images视差图像顶部的透明文本 div
【发布时间】：2017-02-14 04:38:43
【问题描述】：

我对 2 张图像和一些文本使用了简单的 CSS 视差效果：当页面滚动时，文本通过后会出现一个新图像。

但是，我不能对文本块 div 应用透明度，因为它似乎采用了 body 元素。此外，无论我如何设置文本块 div 的样式，它都采用 100% 的宽度。

在这种情况下，是否有应用透明度和 div 宽度的 CSS 解决方案。我宁愿不使用 JavaScript，但如果这是唯一的解决方案，任何想法都会受到赞赏。

CSS：

.body,
html {
  height: 100%;
}
.parallax1 {
  background-image: url("http://www.mrtsjewellers.com/images/image1.jpg");
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax2 {
  background-image: url("http://www.mrtsjewellers.com/images/image2.jpg");
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.text-block {
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-bottom: 50px;
  padding-left: 10%;
  padding-right: 10%;
  width: 70%;
}

<body>
  <div class="parallax1"></div>

  <div class="text-block">
    <h1>Text Title</h1>
    <p>Lets put some text in here</p>
  </div>

  <div class="parallax2"></div>
</body>

HTML

<div class="parallax1"></div>            

<div class="text-block">
    <h1>Text Title</h1>
    <p>Lets put some text in here</p>
</div>

<div class="parallax2"></div>

【问题讨论】：

你能把它变成一个真正的sn-p吗？问题的一个例子？我很难理解你在做什么以及问题是什么。
可以.text-block 成为您视差 div 的孩子吗？
<div> 元素设计为块级元素。即使它是透明的，它也会占用空间。
developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

标签： html css

【解决方案1】：

谢谢你让灰质正常工作。对 .text-block 进行小改动即可获得预期效果。

css

.text-block {
    /*added*/
    display:block;
    position:absolute;
    top:90%;
    left:15%;

    /*original*/
    background:rgba(0, 0, 0, 0.5);
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding-bottom:50px;
    padding-left:10%;
    padding-right:10%;
    width:70%;
    }

【讨论】：

【解决方案2】：

我在你的 sn-p 中看不到你的视差图像，但只需在 .text-block 上使用 background: transparent;

.body,
html {
  height: 100%;
}
.parallax1 {
  background-image: url("http://www.mrtsjewellers.com/images/image1.jpg");
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax2 {
  background-image: url("http://www.mrtsjewellers.com/images/image2.jpg");
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.text-block {
  background: transparent;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-bottom: 50px;
  padding-left: 10%;
  padding-right: 10%;
  width: 70%;
}

<body>
  <div class="parallax1"></div>

  <div class="text-block">
    <h1>Text Title</h1>
    <p>Lets put some text in here</p>
  </div>

  <div class="parallax2"></div>
</body>

【讨论】：