首页 \ 问答 \ 纯CSS视差效果问题(Pure CSS Parallax effect issue)

纯CSS视差效果问题(Pure CSS Parallax effect issue)

 似乎与我的纯css视差有问题，我正在使用本文的概念。 然而，这根本不适合我。  
 我错了吗？  
 您可以在此处使用调试器检查我的代码。  
 编辑：对不起我虽然提供链接会让你更容易检查代码而不是阅读并尝试理解粘贴的代码片段。  
 我希望对我的网站部分有视差效果。  
 在这里你可以看到我的HTML，有更多的部分，但我目前正试图让我的标题使用视差滚动背景：  
<body class="parallax">
<header class="parallax__group">
  <div class="parallax__layer parallax__layer--back darken"></div>

  <div class="parallax__layer parallax__layer--base flex alignvcenter">
    <div id="hdr-logo">
      <img src="images/logo.svg" alt="Mobile Paint Solutions" class="responsive-img">
    </div>
    <div id="hdr-hint">
      <img src="" alt="" class="responsive-img">
    </div>
    <div id="hdr-nav">
      <nav>
        <a href=""><span>Home</span></a>
        <a href=""><span>About</span></a>
        <a href=""><span>Gallery</span></a>
        <a href=""><span>Reviews</span></a>
        <a href=""><span>Pricing</span></a>
        <a href=""><span>Contact</span></a>
      </nav>
    </div>
  </div>

</header>
 
 这是我的LESS风格：  
    .parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
  transform: translateZ(-2px) scale(3);
}
 
 然而目前背景根本没有动，任何人都能解释一下吗？ 

seem to be having issues with my pure css parallax, im using the concept from this article. However this doesn't seem to be working for me at all. 
Am I going about it all wrong? 
You can inspect my code using a debugger here. 
Edit: Sorry I though providing the link would let you inspect the code easier rather than read and try and understand pasted code snippets.  
I want to have parallax effects on sections of my website.  
Here you can see my HTML, there are more parts but im currently trying to get my header working with a parallax scrolling background: 
<body class="parallax">
<header class="parallax__group">
  <div class="parallax__layer parallax__layer--back darken"></div>

  <div class="parallax__layer parallax__layer--base flex alignvcenter">
    <div id="hdr-logo">
      <img src="images/logo.svg" alt="Mobile Paint Solutions" class="responsive-img">
    </div>
    <div id="hdr-hint">
      <img src="" alt="" class="responsive-img">
    </div>
    <div id="hdr-nav">
      <nav>
        <a href=""><span>Home</span></a>
        <a href=""><span>About</span></a>
        <a href=""><span>Gallery</span></a>
        <a href=""><span>Reviews</span></a>
        <a href=""><span>Pricing</span></a>
        <a href=""><span>Contact</span></a>
      </nav>
    </div>
  </div>

</header>
 
And here are my LESS styles: 
    .parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
  transform: translateZ(-2px) scale(3);
}
 
However currently the background is not moving at all, can anyone explain this? 

原文：https://stackoverflow.com/questions/42891398

更新时间：2023-07-07 08:07

最满意答案

 希望这个帮助。  
 HTML：  
<div class="image_container">
  <input type="file" class="edit_btn" value="Edit">
  <img src="img.jpg">
</div>
 
 CSS：  
.image_container{ position: relative; }
.edit_btn{ postion: asolute; top: 10px; right: 10px; background-color: #000; color: #fff; padding: 8px 15px; border: 0; display: none; }
.image_container:hover .edit_btn{ display: block; }

hope this help. 
HTML: 
<div class="image_container">
  <input type="file" class="edit_btn" value="Edit">
  <img src="img.jpg">
</div>
 
CSS: 
.image_container{ position: relative; }
.edit_btn{ postion: asolute; top: 10px; right: 10px; background-color: #000; color: #fff; padding: 8px 15px; border: 0; display: none; }
.image_container:hover .edit_btn{ display: block; }

纯CSS视差效果问题(Pure CSS Parallax effect issue)

最满意答案

相关问答

如何编辑表单上的提交按钮的大小？(How to edit the size of the submit button on a form?)[2023-08-18]

按钮编辑图像(Button edit in an image)[2023-05-28]

如何编辑Checkout按钮立即订购(How to edit the Checkout button to Order Now)[2023-07-15]

如何在用户单击GridView中的编辑按钮时显示下载图像(How to show download image when user click on edit button in GridView)[2022-02-28]

用java编辑图像(Edit an image in java)[2022-02-27]

WordPress：如何将图像上传按钮添加到编辑表单？(WordPress : how to add an image upload button to the edit form?)[2023-11-05]

Bootstrap整个图像作为一个按钮(Bootstrap Whole Image as a Button)[2023-07-03]

TinyMCE插入/编辑图像源按钮(TinyMCE Insert/edit image source button)[2023-09-29]

设置按钮背景图像更改onClick而不编辑xml，导致按钮背景总是在某些情况下单击问题(Set button background image change onClick without edit xml, cause button background always clicked issue in some circumstances)[2021-11-28]

Symfony 2 - 如何编辑单选按钮组(Symfony 2 - How to edit radio button group)[2023-09-10]

相关文章

最新问答