如何实现在其他堆栈社区制作的相同背景图片效果？

Question

我在 World building stack exchange 等其他堆栈社区中看到了那些很酷的背景，我决定我想做一个这样的。所以首先我尝试检查使用了什么技术，打开 Chrome 中的检查工具以查看堆栈如何实现这一点，我只会更加困惑。起初我真的以为我唯一能做到的就是制作一个 div 并添加一个背景图像属性和 css 就是这样，但显然这不是它的工作原理.我无法真正注意到仅仅检查元素所使用的技术，因为有很多，我不知所措，感到困惑。

我也试过在后台拖动一些图片，但是不能，这是为什么？

我想知道 stack 使用的技术来制作这个背景，他们的技术有什么好处？因为我认为这样大小的图像加载时间太长。

还有一个问题

如果你知道其他关于背景中大尺寸图像的技巧/技巧，我很想知道它们。

Answer 1

嘿检查这个代码笔 link http://codepen.io/husain100b/pen/GjEGvo?editors=1100 我只是尝试创建相同的背景。我希望它能帮助你更好地理解这种方式。

另请参阅下面的完整代码：

  body {
     background: url('http://cdn.sstatic.net/Sites/worldbuilding/img/figures.png?v=9929c8f67b27') no-repeat,url('http://cdn.sstatic.net/Sites/worldbuilding/img/bg-body-texture.png?v=1076ddfe073d') repeat,url('http://cdn.sstatic.net/Sites/worldbuilding/img/bg-land.svg?v=dfaf33c88b06') no-repeat;
     background-position: left 500px, center, center, center 204px;
     background-size: 20%, auto, 100%;
     background-attachment:scroll;
 }

.container {
     background: url(http://cdn.sstatic.net/Sites/worldbuilding/img/rift-top.svg?v=11805d608ac1),url(http://cdn.sstatic.net/Sites/worldbuilding/img/bg-header.jpg?v=88701e2ba1ac),url(http://cdn.sstatic.net/Sites/worldbuilding/img/bg-header-tile.png?v=128b1e116433);
     background-repeat: no-repeat,no-repeat,repeat-x;
     background-position: center bottom,center top,center top;
  background-size: 103%,2000px,auto;
       min-height: 900px;
        }

#footer {
    background: #182332;
    background: url('http://cdn.sstatic.net/Sites/worldbuilding/img/rift-bottom.svg?v=4d5835e6daff') center top no-repeat,url('http://cdn.sstatic.net/Sites/worldbuilding/img/bg-footer-grid.png?v=830466e4b56d') center bottom repeat-x,url('http://cdn.sstatic.net/Sites/worldbuilding/img/bg-stars.png?v=e6409fe22c58') center bottom repeat-x,linear-gradient(135deg, #182332 0, #235843 100%);
    background-size: 103%,auto,auto;
       background-attachment: scroll,scroll,scroll;
       min-height: 580px;
    }

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>worldbuilding.stackexchange.com - Background</title>
 
</head>
<body>
 <div class="container"></div>
 <div id="footer"></div>
</body>
</html>

如何实现在其他堆栈社区制作的相同背景图片效果？

How to achieve the same background image effect made in other stack communities?

html

css

background-image