html - 如何使背景图像出现在居中的 html 页面的两侧？

Question

我需要知道如何使图像出现在页面居中的 HTML 内容的两侧。例如，公司 Logo 作为背景，但 HTML 内容位于中间， Logo 重叠在背景上并从中间分开并显示在 HTML 内容的两侧。举个更好的例子，stack over flow 的 Y2K 事件中的独 Angular 兽是如何出现在页面两边的。 enter image description here

Answer 1

使用 multiple backgrounds 和 calc 定位图像两次。在示例中有 2 个不同的位置(窗口边缘和内容 div 边缘):

body { 
  background:url(https://i.imgur.com/UFoVTPB.jpg),url(https://i.imgur.com/UFoVTPB.jpg),url(https://i.imgur.com/UFoVTPB.jpg),url(https://i.imgur.com/UFoVTPB.jpg); 
  background-size:50px,50px,50px,50px;
  background-position: -25px 10px,calc(100% + 25px) 10px,calc(50% - 100px) 150px, calc(50% + 100px) 150px;
  /* 
  
  considering 'i' as the image width and 'c' the container outer-width (with paddings and borders considered depending on the box-sizing defined):

  half-image on html left -> calc( 0 - [i/2] )
  half-image on html right -> calc( 100% + [i/2] )
  half-image on content left -> calc( [50% - {c/2}] )
  half-image on content right -> calc( [50% + {c/2}] )

  */
  background-repeat:no-repeat;
  padding:0;
  margin:0;
}

div { width:200px; height:200px; background:#eee; padding:10px; box-sizing:border-box; margin:auto; }

<div>content</div>