Question

我正在为tumblr主题做一些编码并遇到这个问题：“background attachment：fixed”并不会阻止背景图像上下滚动;它仍随内容移动。

HTML

<div id="content">
    <div id="posts">
        posts...
    </div>
</div>

CSS

#content {
    background-image: url('{image:Background Image}');
    background-repeat: no-repeat;
    background-attachment: fixed;

    height: auto;
    width: calc(100% - 300px);

    float: right;
}

宽度也不起作用，但我被告知这是固定的工作方式，我只是想解决图像仍在移动的事实。

Answer 1

有时，主题的css文件可以覆盖您的自定义修改。尝试将MaybeT放在!important属性中，如下所示：

background-fixed

Answer 2

仍然没有发现它为什么不起作用，但我发现了另一种选择：

为背景创建一个单独的图像，并将其放在img标记中的内容...

<强> HTML

<img id="image" src="source" />
<div id="content"></div>

...然后使用这个方便的CSS布局使图像显示在内容

下面

<强> CSS

#image {
    height: 100%;
    width: 100%;
    position: fixed; //to prevent scrolling
    z-index: -1; //sets z-index, which wasn't working in my previous setup
}

#content {
    background: transparent;
    position: absolute;
    z-index: 1;
}

JSFiddle： http://jsfiddle.net/Minecraft_Percabeth/ah6qkj8e/

CSS - background-attachment：修复不停止滚动（tumblr主题）

2 个答案: