html - 为什么将背景附件从滚动更改为固定更改此背景图像的宽度？

Question

当我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>

标签： htmlcss

Answer 1

从规范：

如果指定了背景图像，则此属性指定它们是相对于视口( ) 固定fixed还是随元素( scroll) 或其内容 ( local) 滚动。属性值以逗号分隔的<attachment>关键字列表形式给出，其中

所以使用时的参考contain将不再是元素而是视口fixed

为避免这种影响，请不要使用contain，但要考虑auto 500px，因为您知道 div 的尺寸：

#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;
}

<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>