不必每次都创建新元素？

Question

我希望能够只有一个id，并仅为img部分创建新元素。我尝试使用img标签，img转到前台，羽毛边缘不起作用。图像仅与调试相同

Jfiddle

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用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，也可以分配不同的图像。