背景附件:固定；无法使用背景位置 [英] background-attachment : fixed; not working with background-position

问题描述

我制作了 codepen 来解释我的问题:

I have made a codepen to explain my problem:

• 用户滚动时，蓝色图像应跟随用户滚动
• 蓝色图像应粘贴在侧面部分的另一侧(右边为左一个|左边为右一个)

pb就是

background-attachment : fixed;

不能使用此CSS规则

background-position: left 0px;

有人可以通过分叉Codepen来向我展示可行的实现方式来帮助我?

Someone can help me by forking the codepen to show me a working implementation ?

.wrapper {
  display: flex;
}

main {
  background-color: red;
  height: 1000px;
  max-width: 992px;
  width: 100%;
}

aside {
  min-width: 150px;
  background-color: green;
}

.left {
  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
  background-repeat: no-repeat;
  background-position: right 0px;
  /*background-attachment: fixed; Doesn't work*/
}

.right {
  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
  background-repeat: no-repeat;
  background-position: left 0px;
  /*background-attachment: fixed; Doesn't work*/
}

<div class="wrapper">
  <aside class="left"></aside>
  <main></main>
  <aside class="right"></aside>
</div>

推荐答案

为什么会这样?

这按预期工作，当您使用background-position: fixed;时，背景相对于视口定位.这意味着在您的示例中，背景现在在.right元素之外的视口的最左侧对齐.

Why is this happening?

This is working as intended, when you use background-position: fixed; the background is positioned relative to the viewport. This means in your example the background is now aligned on the very left of the viewport outside of the .right element.

通过将.right沿着视口的左边缘放在下面的代码片段中，您可以看到这一点.

You can see this by positioning .right along the left edge of the viewport in the snippet below.

.wrapper {
  display: flex;
}

main {
  background-color: red;
  height: 1000px;
  max-width: 992px;
  width: 100%;
}

aside {
  min-width: 150px;
  background-color: green;
}

.left {
  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
  background-repeat: no-repeat;
  background-position: right 0px;
  /*background-attachment: fixed; Doesn't work*/
}

.right {
  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
  background-repeat: no-repeat;
  background-position: left 0px;
  background-attachment: fixed;
  order: -1;
}

<div class="wrapper">
  <aside class="left"></aside>
  <main></main>
  <aside class="right"></aside>
</div>

使用background-position: fixed;时无法相对于元素定位背景，但是可以使用position: fixed;伪元素来达到类似的预期结果:

There is no way to position the background relative to the element when using background-position: fixed; but you can achieve a similar desired result by using a position: fixed; pseudo element:

• 使用以下规则添加新的选择器.left:before, .right:before
  • background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);-背景图片
  • background-repeat: no-repeat;-停止重复播放背景
  • content: "";-伪元素必须显示
  • position: fixed;-将伪元素设置为相对于视口固定
  • height: 100%;-使伪元素填充整个高度
  • width: 100px;-与背景图片的宽度相同
  • Add a new selector .left:before, .right:before with the following rules
    • background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png); - The background image
    • background-repeat: no-repeat; - Stop the background from repeating
    • content: ""; - Required for the pseudo element to show
    • position: fixed; - Set the pseudo element to be fixed relative to the viewport
    • height: 100%; - Make the pseudo element fill the entire height
    • width: 100px; - Same as the width of the background image

    .wrapper {
      display: flex;
    }
    
    main {
      background-color: red;
      height: 1000px;
      max-width: 992px;
      width: 100%;
    }
    
    aside {
      min-width: 150px;
      background-color: green;
    }
    
    .left {
      direction: rtl;
    }
    
    .left:before, .right:before {
      background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
      background-repeat: no-repeat;
      content: "";
      position: fixed;
      height: 100%;
      width: 100%;
    }
    
    .left:before {
      background-position: right top;
    }
    
    .right:before {
      background-position: left top;
    }
    
    .right div {
      position: relative;
    }

    <div class="wrapper">
      <aside class="left"></aside>
      <main></main>
      <aside class="right">
        <div>content</div>
      </aside>
    </div>

    请注意，如果您打算将其他内容放入.right中，则需要将position: relative;添加到该元素中，以在伪元素上方设置堆栈上下文(请参见代码段中的div)

    Please note, if you intend to put other content into .right you will need to add position: relative; to the element to set the stacking context above the pseudo element (see the div in the snippet).

    position: fixed;将元素固定到相对于视口的设置位置.通过不设置bottom，left，right或top位置，伪元素将停留在其原始位置.可以按通常的方式将背景应用于元素.

    position: fixed; fixes the element to a set position relative to the viewport. By not setting a bottom, left, right or top position the pseudo element stays where it is originally positioned. The background can them be applied to the element in the usual way.

    这篇关于背景附件:固定；无法使用背景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！