Question

我对2张图片和一些文字使用简单的CSS视差效果：当页面滚动时，文字传递后会出现新图像。

但是，我无法对text-block 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>

Answer 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%;
    }

Answer 2

我无法在您的代码段中看到您的视差图片，只需在background: transparent;上使用.text-block

＆＃13;

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

＆＃13;

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

＆＃13;

视差图像上方的透明文本div

2 个答案: