每次都不需要創建新元素？

我希望能夠只有一個id，並只爲img部分創建新元素。我試過用img標籤img去前景，羽毛邊不起作用。圖片只有同爲調試每次都不需要創建新元素？

#webdevimage1 { 
 
    padding: 0; 
 
    -webkit-box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    -moz-box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    background-image: url("http://i.imgur.com/fxKJClv.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    width: 320px; 
 
    height: 200px; 
 
    background-size: 320px 200px; 
 
    overflow: hidden; 
 
} 
 
#webdevimage2 { 
 
    padding: 0; 
 
    -webkit-box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    -moz-box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    background-image: url("http://i.imgur.com/fxKJClv.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    width: 320px; 
 
    height: 200px; 
 
    background-size: 320px 200px; 
 
    overflow: hidden; 
 
} 
 
#webdevimage3 { 
 
    padding: 0; 
 
    -webkit-box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    -moz-box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    background-image: url("http://i.imgur.com/fxKJClv.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    width: 320px; 
 
    height: 200px; 
 
    background-size: 320px 200px; 
 
    overflow: hidden; 
 
} 
 
#webdevimage4 { 
 
    padding: 0; 
 
    -webkit-box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    -moz-box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    box-shadow: 0 0 6px 6px #f5f5f5 inset; 
 
    background-image: url("http://i.imgur.com/fxKJClv.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    width: 320px; 
 
    height: 200px; 
 
    background-size: 320px 200px; 
 
    overflow: hidden; 
 
}

<div id="webdevtable"> 
 
    <table width="660px" height="300px" cellpadding="2px" cellspacing="3px"> 
 
    <tr> 
 
     <td> 
 
     <div id="webdevimage1"></div> 
 
     </td> 
 
     <td> 
 
     <div id="webdevimage2"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div id="webdevimage3"></div> 
 
     </td> 
 
     <td> 
 
     <div id="webdevimage4"></div> 
 
     </td> 
 
    </tr> 
 
    </table>

來源

2015-12-02 Matt B

你到底想做什麼？ –

有#webdevimage定義了所有屬性，然後只帶有背景圖片的新ID，或者能夠定義所有的屬性，只有HTML中的背景圖片，所以我不需要重複10行代碼，每次添加新圖片 –

創建一個公共類並將其應用於所有div。 https://jsfiddle.net/bLbjw7rh/6/ –

您可以使用CSS類本，而不是爲每個元素定義的樣式。

請參閱更新的小提琴這裏：https://jsfiddle.net/bLbjw7rh/4/

<div id="webdevtable"> 
    <table width="660px" height="300px" cellpadding="2px" cellspacing="3px"> 
     <tr> 
      <td><div id="webdevimage1" class="webdevimage"></div></td> <td><div id="webdevimage2" class="webdevimage"></div></td> 
     </tr> 
     <tr> 
      <td><div id="webdevimage3" class="webdevimage"></div></td> <td><div id="webdevimage4" class="webdevimage"></div></td> 
     </tr> 
    </table>

在這裏，我分配了通用類與所有常見的造型。根據ID，還可以分配不同的圖像。

來源

2015-12-02 05:54:13 Ash

每次都不需要創建新元素？

回答

相關問題