如何在不使用JavaScript的情況下重複圖片？

-2

我正在做一個任務，我不知道該怎麼做。這項任務是我需要使用所創建的圖像並將其製作成一個圖塊。我們還沒有學會如何使用JavaScript，因此我的搜索空着。下面是HTML + CSS代碼，我有工作：如何在不使用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>

如果有人能幫助我想出解決辦法，希望有一種解釋，那將不勝感激。

來源

2016-12-16 Carlos Meowski Martinez

如果搜索堆棧溢出以進行CSS圖像重複，您應該能夠找到回答。 :-)像這樣的FYI問題可能會被拒絕投票並擱置。 – Nolo

[提示]（http://www.w3schools.com/cssref/pr_background-repeat.asp） –

你的html或css中沒有圖像。 – mlegg

我是幻覺，但我沒有看到您的標記或CSS中的圖像？

但是，如果你想使用一個圖像，並有它的瓷磚，使用CSS背景屬性，並將其設置爲重複。您還可以讓圖像僅在x或y軸上重複，這樣會只給出水平重複，或者只給出垂直重複。你可以在W3school上看到很多例子。

例如，如果你有一個div，你想給一個背景圖像並重復它，通常這將是一個類似磚牆的圖像，它被設計和裁剪以重複顯示而不顯示接縫一個平鋪圖像開始，一個結束。

使用上面的html，我會分配背景圖像和背景重複的正文元素css以在您的站點上進行平鋪。

來源

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 for循環平方需要的金額。這種方式的工作原理是通過JavaScript循環創建div來創建平鋪的馬賽克效果 - 複製並粘貼上面的完整代碼以使其正常工作

來源

2016-12-16 01:46:07

真的嗎？你更專注於語法，一個可行的解決方案 –

謝謝你這樣做，而不是期待別人來清理它！ – Elin

當然可以;下次我會記住這一點 –

如何在不使用JavaScript的情況下重複圖片？

回答

相關問題