JavaScriptを使わずにイメージを繰り返す方法は？

-2

私は課題に取り組んでおり、何をすべきか分かりません。割り当ては、作成したイメージを使用してタイルにする必要があることです。 JavaScriptを使う方法を学んでいないので、私の検索は空になります。誰も私がうまくいけば説明して、これを理解することができた場合、それは非常に高く評価されるだろうJavaScriptを使わずにイメージを繰り返す方法は？

body { 
 
    width: 800px; 
 
    background-color: black 
 
} 
 
.outer1 { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid yellow; 
 
    background-color: lightgreen 
 
} 
 
.outer2 { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid yellow; 
 
    background-color: lightgreen 
 
} 
 
.inner1 { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid yellow; 
 
    border-radius: 50px 10px; 
 
    background-color: green 
 
} 
 
.inner2 { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid yellow; 
 
    border-radius: 10px 50px; 
 
    background-color: green 
 
} 
 
div { 
 
    float: left 
 
}

<body> 
 
    <div class="outer1"> 
 
    <div class="inner1"></div> 
 
    </div> 
 
    <div class="outer2"> 
 
    <div class="inner2"></div> 
 
    </div> 
 
</body>

：ここで私はと仕事をしなければならないHTML + CSSコードです。

出典

2016-12-16 Carlos Meowski Martinez

CSSオーバーレイを検索すると、回答。 :-)これらのようなFYIの質問はおそらく投票され、保留になるでしょう。 – Nolo

[ヒント]（http://www.w3schools.com/cssref/pr_background-repeat.asp） –

あなたのHTMLやCSSに画像がありません。 – mlegg

私は幻覚ですが、マークアップやCSSに画像が表示されませんか？

しかし、イメージを使用してタイル化したい場合は、css backgroundプロパティを使用して繰り返し設定します。 x軸またはy軸だけでイメージを繰り返すように指示することもできます。水平または垂直のリピートのみが可能です。 W3schoolではたくさんの例を見ることができます。

たとえば、背景画像を与えて繰り返してもらいたいdivがある場合、これは典型的には継ぎ目を表示せずに繰り返すように設計され切り取られたレンガの壁のような画像になります1つのタイル画像が始まり、1つは終了する。

上記のhtmlを使用して、background-imageのbody要素cssとbackground-repeatを割り当てて、サイト全体に配置します。

出典

2016-12-16 00:52:42 Lavert

多分あなたはここで背景画像

div { 
 
    background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"); 
 
    background-repeat: repeat; 
 
    width: 100%; 
 
    height: 500px; 
 
    border: 1px solid red; 
 
}

<div> 
 
</div>

出典

2016-12-16 00:54:00 Rahul

-1

<!Doctype HTML> 
<html> 
<body> 
<div id="container"> 
    <div id="canvas"> 
     <script> 
      for(x=0; x<=48;x++) { 
       function create(htmlStr) { 
        var frag = document.createDocumentFragment(), 
        temp = document.createElement('div'); 
        temp.innerHTML = htmlStr; 
        while (temp.firstChild) { 
         frag.appendChild(temp.firstChild); 
        } 
        return frag; 
       } 
       var canvas = document.getElementById('canvas') 
       var div_create = "" 
       if (x % 2 === 0) { 
        div_create = "<div class='outer1', id="+x+"><div class='inner1'></div></div>" 
       } 
       else { 
        div_create = "<div class='outer1', id="+x+"><div class='inner2'></div></div>" 
       } 
       divider = create(div_create) 
       canvas.appendChild(divider) 
      } 
     </script> 
    </div> 
</div> 
</body> 

<style> 
    body{ 
    background-color:black; 
    width: 800px; 
    } 

    .outer1{ 
     height: 100px; 
     width: 100px;border: 2px solid yellow; 
     background-color: lightgreen 
    } 

    .inner1{ 
     height: 100px; 
     width: 100px; 
     border: 2px solid yellow; 
     border-radius : 50px 10px; 
     background-color:green 
    } 

    .inner2{ 
     height: 100px; 
     width: 100px; 
     border: 2px solid yellow; 
    border-radius : 10px 50px; 
    background-color:green 
    } 
</style> 
</html>

を探している、これはあなたがしなければならないすべては、正方形の所望の量のためのためのループの変化のxは動作します。この仕組みはJavaScriptを使ってdivの作成をループして、そのモザイク効果を作成します。上のコード全体をコピーして貼り付けてください。

出典

2016-12-16 01:46:07

本当ですか？実行可能な解決策である文法にもっと集中してください –

他の誰かがそれをきれいにすることを期待するのではなく、それをしてくれてありがとう！ – Elin

確かに;次回はそのことを覚えておきます –

JavaScriptを使わずにイメージを繰り返す方法は？

答えて

関連する問題