Question

我在其他堆栈社区看到了那些很酷的背景，比如World building stack exchange，我决定要做一个像这样的人。首先，我尝试检查使用了哪种技术，在Chrome中打开检查工具，看看堆栈是如何实现的，而且我只是更加困惑。起初我真的认为我唯一能做到的就是创建一个div并用css添加一个background-image属性，但显然它并不是它的工作方式。我真的没有注意到只是检查元素所使用的技术，因为有很多，我感到不知所措并感到困惑。

我也试过拖动背景中的一些图像，但不能，为什么会这样？

我想知道堆栈使用的技术来制作这种背景以及它们技术的优势是什么？因为我认为这个尺寸的图像需要很长时间才能加载。

还有一个问题

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

Answer 1

嘿，请检查此codepen链接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;
    }

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

1 个答案: