Не нужно создавать новый элемент каждый раз?

Я хочу иметь только один идентификатор для этого и создавать новые элементы только для части img. Я пробовал использовать img-тег, который img переходит на передний план, и пернатые края не работают. Изображения только же для отладкиНе нужно создавать новый элемент каждый раз?

Jfiddle

#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, определяющее все свойства, а затем новые идентификаторы только с фоновым изображением или возможность определять все свойства и только фоновое изображение в 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>

Здесь я назначенный общий класс со всем общим стилем. На основе идентификатора может быть назначено другое изображение.

источник

2015-12-02 05:54:13 Ash

Не нужно создавать новый элемент каждый раз?

ответ

Смежные вопросы