他のスタックコミュニティで同じ背景イメージ効果を実現する方法は？

-1

私はWorld building stack exchangeのような他のスタックのコミュニティでそのクールな背景を参照して、私はこれを作るように決める。まず最初に、どのようなテクニックが使われているかを確認しようとしました。スタックでどのようにスタックが達成されたかを見るためにChromeでinspectツールを開きました。最初は私が本当にこれを達成できるのは、divを作ってcssで背景画像のプロパティを追加することだと思っていましたが、それはそれですが、それはどういう仕組みではないようです。私は本当に多くのことがあったとして要素を検査することによって使用される技術に気づくことができず、私は圧倒され混乱しました。他のスタックコミュニティで同じ背景イメージ効果を実現する方法は？

私はバックグラウンドでいくつかの画像をドラッグしようとしましたが、それはなぜですか？

このバックグラウンドを作るためにスタックで使用されているテクニックを知りたいのですが、テクニックの面白さは何ですか？私はサイズが大きすぎて読み込みに時間がかかりすぎると思います。

もう一つ質問

あなたがバックグラウンドで大きなサイズの画像に関する他のトリック/技術を知っていれば、私は彼らを知っているのが大好きです。

出典

2016-09-28 AndrewMk

使用しCSSの背景画像を本体に？ – MCMastery

さて、それだけですか？画像が大きすぎます。トリックスタックが画像の読み込みを高速化するために使用していますか？ – AndrewMk

こんにちは、この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; 
 
\t background-size: 103%,2000px,auto; 
 
\t \t \t  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; 
 
\t \t \t  background-attachment: scroll,scroll,scroll; 
 
\t \t \t  min-height: 580px; 
 
    }

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

出典

2016-09-28 15:54:16

他のスタックコミュニティで同じ背景イメージ効果を実現する方法は？

答えて

関連する問題