javascript - 背景大小 :cover makes background image full-size instead of fitting to div

Question

。您好，我试图弄清楚为什么当我在通过 javascript 放置为 div 背景的图像上使用 background-size: cover 时，图像不会缩小到 div 的大小，而是保持不变全尺寸，只有 div 中的部分可见。

我曾考虑过在将图像设置为背景图像时使用javascript来设置图像属性，但这似乎是一个hacky解决方案，并且没有解决我显然在某处提出的问题。

任何有关我出错的地方的帮助或见解将不胜感激!非常感谢!

CSS:

#module-background
    {
        text-align: center;
        height: 400px;
        width: 400px;
        margin: 0;
        padding: 0;
        font-size: 2em;
        color: #fff;
        background: #888;
        background-size: cover;

        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    #module-background a 
    {
        color: #fff;
    }

    #module-background h1 
    {
        font-size: 2em;
        padding: 0 0.3em;
        line-height: 1em;
    }

    #module-background p 
    {
        padding: 0 1em;
    }

    #module-background section 
    {
      min-height: 100%;
      text-shadow:  -1px -1px 0 #000,
                    1px -1px 0 #000,
                    -1px 1px 0 #000,
                    1px 1px 0 #000;  
    }

HTML

<div>
    <section  id="module-background">
        <h1 id="city">Dummy Text</h1>
        <p>
            <span id="temperature">
            </span>
            <span id="weather">
                Current temperature and weather conditions
            </span>
        </p>
    </section>
</div>

Answer 1

从 CSS 样式中删除此行:

background-attachment: fixed;

应该可以解决问题。