标签: background-attachment

我有一个具有固定背景的滚动元素：

.my-element {
   background: url(/foo.png) no-repeat right bottom;
   background-attachment: fixed;
}

效果很好！通常情况下。但是，如果我对其应用平移变换（即使是 0）（我需要动画），背景就会变为非固定（它锚定到 .my-element 的底部，该元素滚动到视图之外） ：

.my-element {
   background: url(/foo.png) no-repeat right bottom;
   background-attachment: fixed;
   transform: translateX(0); // this breaks the "fixed" behavior
}

这里有一个类似的问题，但 4 年前的答案说这个错误已经被修复，而且只有 Firefox 才有。我在 Firefox 和 Chrome 中就遇到了这种情况。

有什么办法可以避免这种情况吗？或者有没有办法在没有背景附件属性的情况下获得相同的行为？谢谢！

编辑：刚刚添加了一个 jsfiddle 来演示该问题：https ://jsfiddle.net/mozges0k/7/

为什么background-size:cover不同background-attachment: scroll或background-attachment: fixed使用？

例:

http://jsfiddle.net/enriqg9/Yn43U/

我正在尝试找到解决我在 iOS 设备上使用固定背景的问题的方法。我宁愿不必为这个网站重新设计所有东西，我希望一些 CSS 更改可以解决它。这就是网站在 iPhone 上的样子，这也是它应该有的样子。我使用的 CSS 代码如下：

.container {
    min-width: 320px;
    max-width: 480px;
    margin: 0 auto;
}

.fixed-background {
    height: 800px;
    -webkit-backgound-size: cover;
    -o-backgound-size: cover;
    -moz-backgound-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    overflow: auto;
}

我还尝试使用@media查询来修复它，使用 stackoverflow 上的一些帖子，但这似乎没有任何效果：

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
    .fixed-background {
        background-attachment: scroll;
    }
} 

HTML

<div class="fixed-background bg-1">
    <div class="container">
        <div class="title">
            <h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1>
            <h2>CONDOMINIUM MANAGEMENT</h2>
        </div>
    </div> …

我想将第二个 Bootstrap 列的背景图像放在列的中心。然而，现在它位于整个视图的中心，而不是列的中心。

这是我的代码：

HTML：

<div class="container-fluid cust-main-container">
  <div class="row">
    <div class="col-sm-2">
      <!-- [..] -->
    </div>
    <div class="col-sm-10 bg">
      <!-- [..] -->
    </div>
  </div>
</div>

CSS：

* {
    height: 100%;
} //In my actual code, * is html, body

.cust-main-container,
.cust-main-container > .row {
    height: 100%;
}

.bg{
    background: url('http://placehold.it/150x350');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.col-sm-2 {
  border: 1px solid blue;
}

.col-sm-10 {
  border: 1px solid green;
} …

我试图找到与内联 IMG 元素一起使用的仅 CSS 的背景附件等效效果：固定。我尝试过position:fixed，但在这种情况下从文档流中删除图像将不起作用。

这是我的代码笔：

https://codepen.io/julianapong/pen/vewmzw

body{
  height:2000px;
  padding:0;
  margin:0;
}

*{
  box-sizing:border-box;
}

.bg_fixed{
  float:left;
  display:inline-block;
  width:32vw;
  height: 100vh;
  background-attachment:fixed;
  background-size:contain;
  background-repeat:no-repeat;
}

.img_absolute{
  width:32vw;
  height:100vh;
  float:left;
  position:relative;
}

.img_absolute img{
  height:100%;
  width:100%;
  object-fit:cover;
  position:absolute;
  left:0;
  z-index:-1;
}

.img_fixed{
  position:fixed;
  width:33vw;
  height: 100vh;
  z-index:-1
  right:0;
}

.img_fixed_container{
  border:1px solid red;
   width:32vw;
  height: 100vh;
  right:0;
  overflow:hidden;
}

<div class="bg_fixed" style=
     "background-image:url('https://i.imgur.com/KEMR0bJ.jpg')">
       bg_fixed
</div>

<div class="img_absolute"><img src="https://i.imgur.com/KEMR0bJ.jpg" /><span >img_absolute</span></div>

<div class="img_fixed_container"><img class="img_fixed" src="https://i.imgur.com/KEMR0bJ.jpg" /><span >img_fixed</span></div>

理想情况下，我希望 img_absolute 或 img_fixed 以与 …

我需要通过JavaScript修改一些CSS属性.我需要使用的网站基于CMS,我只能编辑身体元素来注入代码.

我想知道是否有一种方法可以在页面加载时使用JavaScript来动态修改/覆盖CSS？

目前我正在寻找修改两个属性(但将来可能更多):

background-image:url(http://mysite.com/img/bg.jpg);
background-attachment: scroll;

我希望它们在我打算嵌入此脚本的特定页面上更改为以下内容:

background-image:url(http://mysite.com/img/new_bg.jpg);
background-attachment: fixed;

我尝试了这个,但它没有用(记住我只能把它放在页面的正文中):

<script type="text/javascript">
    document.getElementById("body").style.backgroundImage = 'url(http://mysite.com/img/new_bg.jpg)';
</script>

有任何想法吗？谢谢.