ロード

こんにちは、私はこの段階でウェブのテーマを作成したい：ロード

1 - 背景画像 First Step Image 2セット - 最後に、他の背景画像を設定する画像 3 - 円やボックスを作成し、現在のボックスの背景として画像1の一部をロード（しかし、どのように???これは私の質問です。）

コード：

<style> 
#Background_1 { 
     width: 100%; 
     height: 100%; 
     background-image: url("img1.jpg"); 
     background-size: 100% 100%; 
     z-index: 1; 
     position: fixed; 
    } 

    #Background_2 { 
     width: 100%; 
     height: 100%; 
     background-image: url("img2.jpg"); 
     background-size: 100% 100%; 
     z-index: 2; 
     position: fixed; 
    } 

    .BoxLoad { 
     width: 250px; 
     height: 250px; 
     margin-left: 15%; 
     box-shadow: 0px 0px 11px 1px rgba(20, 20, 20, 0.8); 
     color: #FFFFFF; 
     border-radius: 50%; 
     display: inline-block; 
     font-size:24px; 
    } 

</style> 


<body> 

<div id="Background_1"> 
    <div id="Background_2"> 
     <div class="BoxLoad"> 
     </div> 
     <div class="BoxLoad"> 
     </div> 
     <div class="BoxLoad"> 
     </div> 
    </div> 
</div>

このソースには、バックグラウンドで1画像（それを見ることはできません）と1枚の他の（差分）画像があります。それらのボックスがあります。ボックスには背景色がなく、画像2の背景の影があります。しかし、私が必要なのは、バックグラウンド1をボックス背景（バックグラウンド1の一部ではなくバックグラウンド2）としてロードすることです。背景1はまだバック2の下にあります。その箱は後ろの1画像のポイントでした。最後には、私はこのようなものが必要：はEnd Image (What i want)

出典

2016-08-12 Samethings

あなたがチェックすることができthis link

主なアイデアは、あなたの「ステップ3円」で（バックグラウンドのように）同じ画像を入れてあることを自分の位置を固定することです背景と同じです。

しかし、これは単に透過性をシミュレートしたものです。

編集： @Mike Stringfellowと別の回答で、SVG clipPathを使用できますが、HTML5をサポートする必要があります。

出典

2016-08-12 11:19:44 Razzka

ロードするためのより良いオプションがあります（バック画像1）一度？我々は1つ以上の円を持っている場合は、各サークル上にこの画像を読み込むことは重い負荷です！ – Samethings

実際には、ブラウザはキャッシングを使用しているため、この画像は一度だけ読み込まれます。これは開発者ツールの[ネットワーク]タブで確認できます。 – Razzka

円に複数のdivを作成し、円のdivの背景画像を設定します。目的の位置になるように背景画像を配置します。私は最初のサークルのためにしました。添付していた画像を使って円のdivを区別するには、フィルターを使用しました。これがあなたの望むものであることを願っています。

.circle{ 
 
    background-image: url(http://i.stack.imgur.com/EY480.jpg); 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    border: solid 1px red; 
 
    position: absolute; 
 
    -webkit-filter: brightness(200%); 
 
} 
 

 
.wrapper{ 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.circle1{ 
 
    top: 72px; 
 
    left: 183px; 
 
    background-position: -183px -72px; 
 
} 
 

 

 
.circle2{ 
 
    top: 152px; 
 
    left: 183px; 
 
    background-position: -183px -152px; 
 
}

<div class="wrapper"> 
 
    <img src="http://i.stack.imgur.com/OlmRK.jpg"> 
 
    <div class="circle circle1"></div> 
 
    <div class="circle circle2"></div> 
 
</div>

出典

2016-08-12 11:20:08 z0mBi3

（画像1）を一度ロードする方が良いでしょうか？我々は1つ以上の円を持っている場合は、各サークル上にこの画像を読み込むことは重い負荷です！他の問題は背景位置です：-183px -72px; !!!各サークルでこれを変更する必要があります！冗談？私は静的なコードが必要です！ – Samethings

画像は一度だけロードされ、すべての部門にバックグラウンドとして適用されます – z0mBi3

私にこれ以上の円を与えることができますか？（ポイントは使用しない） – Samethings

あなたの背景画像にSVGクリップパスを割り当てることができます。基本的に、あなたは以下のように円を構築し、そのようにclip-path: url(#circles);

<svg> 
    <defs> 
    <clipPath id="circles"> 
     <circle cx="100" cy="100" r="60" /> 
     <circle cx="300" cy="100" r="60" /> 
     <circle cx="500" cy="100" r="60" /> 
     <circle cx="200" cy="250" r="60" /> 
     <circle cx="400" cy="250" r="60" /> 
     <circle cx="600" cy="250" r="60" /> 
     <circle cx="300" cy="400" r="60" /> 
     <circle cx="500" cy="400" r="60" /> 
     <circle cx="700" cy="400" r="60" /> 
    </clipPath> 
    </defs> 
</svg>

全フィドルのような背景のdivのクリップパスCSSプロパティを設定：https://jsfiddle.net/hqss8taj/

出典

2016-08-12 11:46:11

私は決してsvgを使用しませんでした。私がこれを（http://uupload.ir/files/daj4_49687-1920x1080.jpg）同じ方法で望むならば、まったく。どのようなソースを使用する必要がありますか？ – Samethings

これはあなたの最初の質問とはかなり異なっています。私はそのためにクリップパスを使用しません、私は単に自転車の画像を山の背景と外側のdivの中に入れます：https://jsfiddle.net/96grx7xz/ –

私の質問から、私は何かに到達したい私はあなたに送ったように！私はぼかし画像を作成して最初に置いて、2番目は画像1のぼかし画像ではないです。 – Samethings

答えて

関連する問題