Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Смещается фоновый рисунок в ячейке таблицы (CSS) / 12 сообщений из 12, страница 1 из 1
12.06.2019, 19:04
    #39825830
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
Таблица 100х100 клеток:

Код: html
1.
2.
3.
4.
    <table id="game_grid">
      <col class="col1">
      <col span="1000" class="coln">
    </table>



Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
       var gameGrid = document.getElementById("game_grid");
        var gameGridInnerHTML;
     

        for (i = 0; i < 100; i++){
            gameGridInnerHTML = gameGridInnerHTML + '<tr>';
            for(j = 0; j < 100;j++){
                gameGridInnerHTML = gameGridInnerHTML +  '<td class="map_element" style="background-position: 0 0">'+j+' '+i+'</td>'; 
            }
            gameGridInnerHTML = gameGridInnerHTML + '</tr>';
        }
        gameGrid.innerHTML = gameGridInnerHTML;



Ячейки содержат фоновый рисунок со смещением:

Код: css
1.
2.
3.
4.
5.
6.
.map_element{
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: url(https://adndmaps.000webhostapp.com/set1_2.bmp) no-repeat;
}



Фоновый рисунок 40х680 точек (17 сшитых картинок, во всех ячейках в фон - картинка номер 1, выглядит как светло-серый квадрат с темно-серой каймой в 1 пиксел). Но при отображении видно, что в ячейку становится лишние пара пикселов по вертикали, зацепляя следующую картинку. Никак не разберусь, откуда такой эффект, может кто-то подскажет?

Код, относящийся к таблице:
https://jsfiddle.net/m9q6ph1y/
...
Рейтинг: 0 / 0
12.06.2019, 21:11
    #39825851
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
...
Рейтинг: 0 / 0
12.06.2019, 22:16
    #39825865
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
Спасибо, но это фактически рисунок отмасштабирован с 40 до 38 пикселов? Я понимаю что так можно сделать, но проблема в том чтобы бэкграунд передавался без искажений, он потом будет содержать и другие фрагменты изображений, которые изменять нежелательно.

Хотелось бы понять, откуда вообще растут ноги у этого искажения? В смысле что если исходный размер рисунка 40, и у ячейки 40, и границы установлены в 0, то что не так?
...
Рейтинг: 0 / 0
13.06.2019, 06:47
    #39825917
Korcar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
ничего лишнего не заметил
...
Рейтинг: 0 / 0
13.06.2019, 08:01
    #39825931
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
...
Рейтинг: 0 / 0
13.06.2019, 08:04
    #39825933
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
Korcarничего лишнего не заметилбраузер?
...
Рейтинг: 0 / 0
13.06.2019, 08:08
    #39825935
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
...
Рейтинг: 0 / 0
13.06.2019, 08:25
    #39825942
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
...
Рейтинг: 0 / 0
13.06.2019, 09:01
    #39825957
Korcar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
вадяKorcarничего лишнего не заметилбраузер?
Хрумчик
...
Рейтинг: 0 / 0
13.06.2019, 09:12
    #39825968
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
Korcarвадяпропущено...
браузер?
Хрумчик
вот поэтому и не правильно видишь
...
Рейтинг: 0 / 0
13.06.2019, 09:23
    #39825976
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
Код: css
1.
box-sizing: border-box;


помогло, большое спасибо!
...
Рейтинг: 0 / 0
13.06.2019, 09:39
    #39825985
IcyWizard
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Смещается фоновый рисунок в ячейке таблицы (CSS)
А заодно и выяснилось, откуда ноги росли. Автоматом отдавался 1 пиксел под padding. Соответственно либо надо было ставить
Код: css
1.
box-sizing: border-box;

либо
Код: css
1.
padding: 0;
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Смещается фоновый рисунок в ячейке таблицы (CSS) / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]