Как использовать один фон для макета div мозаики / мозаики в CSS или JQuery

Question

Как использовать один фон для макета div мозаики / мозаики в CSS или JQuery

0

Используя css или jquery, как мне создать что-то вроде прикрепленного, которое реагирует.

У меня есть сетка и все. Это проще, чем прикрепленная фотография. Просто сетка 7x5. Я просто не знаю, как создать фоновое изображение, которое будет охватывать все div в сетке.

KT. 30 нояб. 2013, в 08:39

Источник

Теги:

jquery

css

background-image

tile

jquery-masonry

2 ответа

Ещё вопросы

vals · Answer 1 · 2013-11-30T14-18-00.000Z

Самый простой способ сделать это - разместить фон в контейнере сетки.

Мое решение, используя таблицу (я думаю, что это также простой способ сделать сетку). Но фон в контейнерном решении также полезен для других подходов к сетке.

HTML

<table class="container">
  <tr>
  <td>1</td>
  <td>2</td>
  <td colspan="2">3</td>
  <td rowspan="2">5</td>
  </tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2">3</td>
<td>5</td>
</tr>
</table>

CSS

body, html {
    width: 99%;
    height: 99%;
}

.container {
    width: 100%;
    height: 100%;
        background-image: url("http://placekitten.com/400/300");
    background-repeat: no-repeat;
    background-size: cover;
    border-collapse: collapse;
}

td {
    border: solid white 8px;
    color: red;
    font-size: 50px;
}

демонстрация

Viken Patel · Answer 2 · 2013-11-30T06-08-00.000Z

Вы можете создать 2 изображения с сеткой, которая должна быть прозрачной, а другая - вашей фотографией или чем-то еще. С помощью CSS вы можете перекрывать оба изображения с положением: абсолютным и z-индексом.

Попробуйте под кодом:

HTML:

<div class="img_container">
<img src=1.jpg/>
<img class="grid" src=2.jpg/>
</div>

CSS:

.img_container{
  position:relative;
}
.img_container img{
  z-index:1;
  position:relative;
}
.img_container img.grid{
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:0.5; //Remove it if you don't need to make transparent.
}

И вам нужно сделать оба изображения одного размера. Вот пример jsbin