Background-size:cover 使背景图像全尺寸而不是适合 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;

它应该可以解决问题。