css的一些小技巧！页面视觉差！_html/css_WEB-ITnose

<!-- Four containers for setting the background images --><div class="parallax">  <div class="bg__foo">foo</div>  <div class="bg__bar">bar</div>  <div class="bg__baz">baz</div>  <div class="bg__bazz">bazz</div></div>// setting base styles to image containers[class*="bg__"] {  height: 50vh;  text-indent: -9999px;  /* fix background */  background-attachment: fixed;  /* center it */  background-position: center center;  /* Scale it nicely to the element */  background-size: cover;  /* just make it look a bit better ;) */  &:nth-child(2n) {    box-shadow: inset 0 0 1em #111;  }}.bg__foo {  background-image: url(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg  );}.bg__bar {  background-image: url(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg  );}.bg__baz {  background-image: url(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg  );}.bg__bazz {  height: 100vh;  background-image: url(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg  );}

几乎全球兼容性。它已经在IE9和Android 2.1支持。