Question

我正在尝试仅使用css构建简单的视差效果，并且可以正常工作，但存在以下问题。我有3张来自后端的图像，它们是内联加载的，直到现在一切都还不错，但是当我应用样式并进行视差处理时，我的标题/副标题文本“ proj text”和“ learn more”就随着背景，我不想要那个。我的主要问题是，如果您查看jsfiddle示例并滚动到第二张图片，您会注意到我的“ Projec文本”和“了解更多”文本是如何遍历图像文本“ Dream”的。我不希望我的文字移动。这是一个小提琴的例子 [小提琴] [1]

  [1]: http://jsfiddle.net/h14v5n8d/13/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
}

.project__image {
  cursor: pointer;
  min-height: 760px;
  background: 50% 50% / cover no-repeat;
  background-attachment: fixed;
}

 .project__body {
    padding-left: 50px;
    padding-top: 50px;
  }

<div class="project__image " style="background-image: url('https://images.unsplash.com/photo-1457301547464-91995555cd25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ca3e6701b2e2c7d01bdfcb92ce1a9a10&auto=format&fit=crop&w=1373&q=80');">
  <div class="container">
    <div class="project__body">
      <div class="project__content">
        <div class="project__head">
          <h2 class="project_titl">
            Proj Title 1
          </h2>
          <div class="project__view__all">
            <a href="javascript:;" class="project__text__action">
              Learn More
              <span class="btn btn__rounded btn_darkred"> 
                <i class="fa fa-angle-right"></i>
              </span> 
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="project__image " style="background-image: url('https://images.unsplash.com/photo-1518775005910-7aa25aa9614a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f98dec0a90f164b534bda2ddffc26eac&auto=format&fit=crop&w=1433&q=80');">
  <div class="container">
    <div class="project__body">
      <div class="project__content">
        <div class="project__head">
          <h2 class="project_titl">
            Proj Title 2
          </h2>
          <div class="project__view__all">
            <a href="javascript:;" class="project__text__action">
              Learn More
              <span class="btn btn__rounded btn_darkred"> 
                <i class="fa fa-angle-right"></i>
              </span> 
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="project__image " style="background-image: url('https://images.unsplash.com/photo-1526245710071-cd7e56cdf24d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ee0297744f127382715fc094e65250ea&auto=format&fit=crop&w=1350&q=80');">
  <div class="container">
    <div class="project__body">
      <div class="project__content">
        <div class="project__head">
          <h2 class="project_titl">
            Proj Title 3
          </h2>
          <div class="project__view__all">
            <a href="javascript:;" class="project__text__action">
              Learn More
              <span class="btn btn__rounded btn_darkred"> 
                <i class="fa fa-angle-right"></i>
              </span> 
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

视差阻止文本移动

0 个答案: