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

我希望能够只有一个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

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

回答

相关问题