Question

背景附件有什么区别：scroll and local？

我一直在尝试阅读有关这些主题的博客，但无法解释它们之间的区别？。

Answer 1

fixed ：关于视口的背景是固定的。（...）即使元素具有滚动机制（...），“固定”背景也不随元素移动。



local ：关于元素内容的背景是固定的：如果元素具有滚动机制，背景将滚动元素的内容，并{{ 3}}和background painting area相对于元素的可滚动区域而不是框架它们的边框。（...）



scroll ：背景是针对元素本身修复的，不会滚动其内容。（它有效地附加到元素的边界。）

演示：background positioning area，fixed，local。

Answer 2

已修复：背景图片相对于浏览器窗口是固定的，无论元素是否滚动或其中的内容是否滚动。 Demo

.box{
    width: 400px;
    height: 1000px;
    background-color: #f2f2f2;
    overflow: scroll;
    background-image: url(http://i.imgur.com/9onLIRX.jpg);
    background-attachment: fixed;
    background-size: cover;
}

<div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aperiam distinctio doloribus odio mollitia inventore ipsa necessitatibus alias ab, harum et dolorum iusto hic vel? Nobis tempora consequuntur ab, omnis quisquam nihil! Quod repudiandae provident mollitia architecto placeat nostrum, accusamus, non praesentium consequatur delectus tempore. Placeat aspernatur consequatur praesentium, exercitationem doloribus vel cum vitae in ducimus maiores, fugit repudiandae accusamus, quaerat, commodi explicabo eius beatae culpa distinctio! Eaque maxime dolorum ad nostrum cupiditate temporibus, doloribus, esse voluptatem minus explicabo cum atque sit adipisci quis magnam ea! Et pariatur nobis ad odit, nihil sunt nostrum unde ipsum, eligendi voluptatem libero nemo laudantium accusamus, tenetur atque. Totam reiciendis eveniet, dolorem cumque asperiores repellat vero. Inventore ducimus ratione vitae dolores alias ex officiis hic, quaerat voluptatibus nisi officia numquam quasi odio itaque repellat cumque animi, eius quod ipsum harum temporibus earum, ipsa illo libero. Odit nostrum fugiat aliquid porro labore blanditiis dolore quisquam accusantium voluptatibus minima voluptate itaque, a consequuntur aperiam sapiente quidem molestiae tenetur atque quia ducimus! Deleniti libero id laudantium! Deleniti, quos corporis unde consectetur vel possimus sed quidem aliquid ipsam mollitia alias id sapiente esse. Hic impedit, laudantium fugit adipisci commodi quaerat nihil tempore, eligendi explicabo beatae magni maiores ratione vel dolores omnis aperiam rerum corporis distinctio, cumque, repellat ducimus. Nisi, mollitia nostrum obcaecati ipsum quis repudiandae harum, nemo ex incidunt ipsam explicabo repellendus suscipit laboriosam accusamus, nihil tenetur quos. Totam modi velit sed ipsa consequatur quaerat excepturi iusto nesciunt quo maxime sint facilis officiis, eveniet quis libero possimus molestiae veniam harum illum quam assumenda dolorem nam voluptatum! A eligendi perferendis cum iusto! Possimus, neque! Recusandae nobis ut minima facilis quae, itaque vitae, magnam ea eum ab aliquid, ipsum porro laboriosam expedita nulla doloribus sit! Sunt ullam molestiae nulla maxime quis veniam rem at? Similique quidem commodi ducimus libero debitis ipsum expedita recusandae, suscipit minima eius obcaecati illum fugit, neque consequuntur iste iure rem iusto blanditiis eos vel velit perferendis unde sed. Voluptas non, minus placeat itaque animi facere numquam dolorem nisi, molestiae tenetur rem aliquam praesentium modi inventore et aut corrupti magni dolorum ipsam sequi incidunt fugiat explicabo at, alias. Minima quisquam alias ipsa esse saepe explicabo vel, sed modi incidunt commodi corporis ullam soluta, consequuntur optio. Aut facilis nam, eius, cum autem commodi libero tempora quisquam illum hic, quia tenetur! Mollitia, quas nisi ab, autem optio explicabo inventore. Ipsum voluptate ab magnam consequatur commodi nesciunt. Quae ex rerum sint quod, suscipit, doloremque corporis explicabo sunt, quasi odio accusantium, totam ullam fugiat distinctio soluta aliquam eos? Debitis nisi ab iusto dolores laboriosam natus, assumenda similique aliquam mollitia ea, libero quibusdam sint doloribus. Blanditiis, tempora, obcaecati. Eveniet distinctio, amet quidem non tempore expedita repellendus. Ab nobis, enim totam quae, fuga, ullam porro libero nemo deleniti eveniet obcaecati quasi? Quis vel voluptatum ipsa hic, possimus obcaecati laudantium aspernatur et. Fuga explicabo nobis quae pariatur doloremque natus id, perferendis corporis velit beatae consequuntur consequatur vero harum repudiandae nesciunt porro incidunt sit, ex, animi impedit dolorem deserunt molestiae, provident. Neque, nihil sunt voluptates.
</div>

local ：背景图片相对于元素是固定的，但是与元素本身一起滚动（因此可以相对于浏览器的窗口滚动）。 Demo

.box{
    width: 400px;
    height: 1000px;
    background-color: #f2f2f2;
    overflow: scroll;
    background-image: url(http://i.imgur.com/9onLIRX.jpg);
    background-attachment: local;
    background-size: cover;
}

<div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aperiam distinctio doloribus odio mollitia inventore ipsa necessitatibus alias ab, harum et dolorum iusto hic vel? Nobis tempora consequuntur ab, omnis quisquam nihil! Quod repudiandae provident mollitia architecto placeat nostrum, accusamus, non praesentium consequatur delectus tempore. Placeat aspernatur consequatur praesentium, exercitationem doloribus vel cum vitae in ducimus maiores, fugit repudiandae accusamus, quaerat, commodi explicabo eius beatae culpa distinctio! Eaque maxime dolorum ad nostrum cupiditate temporibus, doloribus, esse voluptatem minus explicabo cum atque sit adipisci quis magnam ea! Et pariatur nobis ad odit, nihil sunt nostrum unde ipsum, eligendi voluptatem libero nemo laudantium accusamus, tenetur atque. Totam reiciendis eveniet, dolorem cumque asperiores repellat vero. Inventore ducimus ratione vitae dolores alias ex officiis hic, quaerat voluptatibus nisi officia numquam quasi odio itaque repellat cumque animi, eius quod ipsum harum temporibus earum, ipsa illo libero. Odit nostrum fugiat aliquid porro labore blanditiis dolore quisquam accusantium voluptatibus minima voluptate itaque, a consequuntur aperiam sapiente quidem molestiae tenetur atque quia ducimus! Deleniti libero id laudantium! Deleniti, quos corporis unde consectetur vel possimus sed quidem aliquid ipsam mollitia alias id sapiente esse. Hic impedit, laudantium fugit adipisci commodi quaerat nihil tempore, eligendi explicabo beatae magni maiores ratione vel dolores omnis aperiam rerum corporis distinctio, cumque, repellat ducimus. Nisi, mollitia nostrum obcaecati ipsum quis repudiandae harum, nemo ex incidunt ipsam explicabo repellendus suscipit laboriosam accusamus, nihil tenetur quos. Totam modi velit sed ipsa consequatur quaerat excepturi iusto nesciunt quo maxime sint facilis officiis, eveniet quis libero possimus molestiae veniam harum illum quam assumenda dolorem nam voluptatum! A eligendi perferendis cum iusto! Possimus, neque! Recusandae nobis ut minima facilis quae, itaque vitae, magnam ea eum ab aliquid, ipsum porro laboriosam expedita nulla doloribus sit! Sunt ullam molestiae nulla maxime quis veniam rem at? Similique quidem commodi ducimus libero debitis ipsum expedita recusandae, suscipit minima eius obcaecati illum fugit, neque consequuntur iste iure rem iusto blanditiis eos vel velit perferendis unde sed. Voluptas non, minus placeat itaque animi facere numquam dolorem nisi, molestiae tenetur rem aliquam praesentium modi inventore et aut corrupti magni dolorum ipsam sequi incidunt fugiat explicabo at, alias. Minima quisquam alias ipsa esse saepe explicabo vel, sed modi incidunt commodi corporis ullam soluta, consequuntur optio. Aut facilis nam, eius, cum autem commodi libero tempora quisquam illum hic, quia tenetur! Mollitia, quas nisi ab, autem optio explicabo inventore. Ipsum voluptate ab magnam consequatur commodi nesciunt. Quae ex rerum sint quod, suscipit, doloremque corporis explicabo sunt, quasi odio accusantium, totam ullam fugiat distinctio soluta aliquam eos? Debitis nisi ab iusto dolores laboriosam natus, assumenda similique aliquam mollitia ea, libero quibusdam sint doloribus. Blanditiis, tempora, obcaecati. Eveniet distinctio, amet quidem non tempore expedita repellendus. Ab nobis, enim totam quae, fuga, ullam porro libero nemo deleniti eveniet obcaecati quasi? Quis vel voluptatum ipsa hic, possimus obcaecati laudantium aspernatur et. Fuga explicabo nobis quae pariatur doloremque natus id, perferendis corporis velit beatae consequuntur consequatur vero harum repudiandae nesciunt porro incidunt sit, ex, animi impedit dolorem deserunt molestiae, provident. Neque, nihil sunt voluptates.
</div>

Answer 3

阅读the docs并单击接受的答案的演示后，我仍然感到困惑。有时，您只想要一个无术语的解释！

CSS-Tricks来解救！

请☝️单击此链接，或单击intermediate按钮以获取高级演示。

注意：浏览演示时，请在单击之间暂停。有时，您需要让浏览器有机会根据是将鼠标悬停在图像还是周围的空白上来确定要滚动的内容。

规则释义

Run code snippet —无论什么背景图像都随页面一起移动。
scroll —背景图片不会随任何东西一起移动。感觉有点视差。
fixed —背景图像以当前鼠标位置下的任何东西移动。

提示：针对每种情况……

local

享受！

1. Scroll over the white border.
2. Now stop, move the cursor over an image. Pause, then scroll.

@import "compass/css3";

h2 {
  text-align: center;
  margin-top: 48px;
}

div {
  height: 200px;
  width: 50%;
  max-width: 600px;
  margin: 32px auto;
  overflow-x: hidden;
  overflow-y: scroll;
}

.with-image {
  background: url('https://loremflickr.com/320/240/flower');
}

.content {
  height: 400px;
  width: 100%;
  font-size: 3rem;
  color: #ddd;
}

.extra-space {
  margin-bottom: 50px;
}

background-attachment：scroll和local之间有什么区别？

3 个答案:

享受！