当我将background-attatchment从scroll更改为fixed时，实际上会更改背景图像的尺寸（至少是宽度）。为什么会这样？
#background-image {
height: 500px;
width: 500px;
background-image: url(https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1407523604l/15136531.jpg);
background-repeat: no-repeat;
background-size: contain;
background-attachment: scroll;
}<div id="background-image"></div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, harum molestias quia tempore doloribus enim rem eius facere inventore sit nostrum totam assumenda, impedit laudantium fugit? Ratione dignissimos dolor sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam iusto mollitia facere, voluptate enim natus. Dolorem accusantium cum voluptatibus quasi minima, laborum enim quisquam maiores iusto esse dolor beatae quam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores optio voluptate ipsam maiores corrupti, quidem aut ex enim est deleniti! Rerum laboriosam earum, voluptas possimus animi quae et quis asperiores. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nobis nesciunt eos fugiat voluptatem natus repudiandae iusto numquam optio, laudantium quia maxime perferendis soluta eligendi fugit esse totam voluptatum hic! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque a, quo cumque nemo velit quidem eveniet? Quae, iusto iste, neque aperiam ut architecto hic rerum necessitatibus recusandae quisquam quo temporibus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est perferendis ea nostrum necessitatibus explicabo culpa ipsa fuga natus maxime tempora ex blanditiis harum accusamus qui corporis ullam ducimus, dolorum quae? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis fugit ipsa natus architecto, officia atque ex. Quia, minus illum vitae omnis, incidunt accusamus explicabo voluptatum repudiandae eaque maxime reprehenderit qui. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure blanditiis ipsam at excepturi assumenda laborum quibusdam tempora quam perferendis ratione, sunt voluptate ducimus, velit distinctio. Hic eaque deleniti quisquam quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum eos eaque cum, consequatur assumenda quam error dolor molestiae labore ex itaque delectus officia animi eius, odio harum, hic voluptatibus ut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint voluptas, aperiam excepturi ratione libero, placeat est, saepe quas labore fugit enim architecto voluptatem maxime facere sunt impedit repellat maiores exercitationem? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto placeat, assumenda nulla harum quia officiis ullam facilis eaque dolore magni modi, fugiat quis! Ipsum, facere incidunt voluptates laboriosam id quidem? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam eum laboriosam sint animi nisi minima placeat in recusandae amet et iste, asperiores ipsa hic, culpa unde, fugiat voluptatibus! Quos, omnis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos beatae tenetur dolores ad temporibus laboriosam repellendus dolorum corporis praesentium quos, possimus obcaecati fugiat reiciendis similique fuga est. Blanditiis, in pariatur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam est temporibus eos beatae. Atque eum tenetur voluptas totam, vero voluptatem in dolorem dolore velit maxime, enim laudantium. Est, facilis corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum debitis est similique quis. Cumque iusto repudiandae velit ea repellat dolore sunt expedita ut voluptatibus culpa quam totam vitae, ducimus modi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis magni iure numquam sit! Nostrum quia, nemo neque deserunt, ex modi saepe optio ea illo debitis nesciunt officia consequuntur eum repudiandae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint adipisci animi minima, porro totam consectetur, ad labore consequatur aspernatur quod, ex tempore aperiam non. Ullam odit dolorem tempore doloremque est. Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, eligendi? Ea, ab maiores quia error nam esse totam perspiciatis aperiam illo nesciunt voluptates autem at. Ducimus suscipit voluptates libero voluptatibus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque praesentium laboriosam, ratione, voluptatum error inventore ducimus illo dolorum sed delectus nam dolore est minima velit! Quae praesentium doloremque cumque explicabo. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam dicta autem numquam obcaecati? Dolores impedit repellat tempora quas voluptatem aspernatur blanditiis est, eum laborum, aut dolorem, odit magnam inventore corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem iusto officia a soluta explicabo quo officiis quos sunt beatae modi. Sunt, maxime ex tenetur adipisci laudantium iure velit ea corrupti! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt quia deleniti, ipsa excepturi reiciendis reprehenderit at odit inventore, earum perferendis aspernatur, soluta dicta voluptatibus provident tempore saepe animi ratione assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, necessitatibus! Explicabo sit culpa perspiciatis id esse quod placeat! Dolore aperiam molestias esse excepturi, voluptate provident neque. A porro minus libero?</div>
答案 0 :(得分：0)
如果指定了背景图像，则此属性指定它们是相对于视口固定的 （
fixed）还是与元素（{ {1}}或其内容（scroll）。该属性的值以逗号分隔的local个关键字列表给出，其中
因此，<attachment>的引用将不再是元素，而是使用contain时的视口
为避免这种情况，请不要使用fixed，而应考虑使用contain，因为您知道div的尺寸：
auto 500px#background-image {
height: 500px;
width: 500px;
background-image: url(https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1407523604l/15136531.jpg);
background-repeat: no-repeat;
background-size: auto 500px;
background-attachment: fixed;
}