<div>標簽是HTML中常用的一個元素，用于創(chuàng)建一個容器，用來包裹其他HTML元素，常用于布局和樣式設(shè)置。在使用<div>標簽時，經(jīng)常會遇到一個需要將圖片不重復(fù)地顯示在不同的<div>容器中的情況。本文將通過幾個代碼案例來詳細解釋如何實現(xiàn)這個功能。

案例一：

，我們需要準備一個包含多個<div>容器的HTML頁面。每個容器都需要有一個不同的id屬性，以便我們在CSS中對其進行樣式設(shè)置。接下來，我們在每個容器中插入一張圖片，為了讓圖片不重復(fù)地顯示在各個容器中，我們可以使用CSS的background屬性。

<div id="container1">
<div class="image"></div>
</div>
<br>
  <div id="container2">
<div class="image"></div>
</div>
<br>
  <div id="container3">
<div class="image"></div>
</div>
<br>
  <style>
.image {
width: 200px;
height: 200px;
background-image: url("example.jpg");
background-repeat: no-repeat;
}
</style>

在上面的代碼中，我們?yōu)槊總€<div>容器設(shè)置了一個相同的class屬性名為“image”，然后通過CSS的background-image屬性將圖片設(shè)置為背景圖，使用background-repeat屬性設(shè)置為不重復(fù)，并且通過background-size屬性控制圖片的大小適應(yīng)容器。這樣就能保證圖片不重復(fù)地顯示在各個<div>容器中。

案例二：

上述方法雖然有效，但需要在CSS中寫多個樣式。如果要實現(xiàn)更靈活的圖片不重復(fù)顯示，可以使用JavaScript來實現(xiàn)。下面是一個使用JavaScript的代碼示例。

<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<br>
  <script>
function randomBackgroundImage() {
var containers = document.querySelectorAll('#container1, #container2, #container3');
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
<br>
      containers.forEach(function(container) {
var randomIndex = Math.floor(Math.random() * images.length);
container.style.backgroundImage = 'url(' + images[randomIndex] + ')';
});
}
<br>
    randomBackgroundImage();
</script>

在這個例子中，我們通過JavaScript的querySelectorAll選擇器獲取了所有的<div>容器，并定義了一個包含多個圖片路徑的數(shù)組。然后，使用forEach方法遍歷每個容器，在每次循環(huán)中生成一個隨機的索引值，通過style.backgroundImage屬性將圖片路徑賦值給容器的背景圖片。這樣就能實現(xiàn)將不同的圖片不重復(fù)地顯示在各個<div>容器中。

通過以上兩個案例，我們分別使用了CSS和JavaScript來實現(xiàn)了將圖片不重復(fù)地顯示在不同的<div>容器中的功能。你可以根據(jù)需要選擇合適的方法來實現(xiàn)該功能。