powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Смещается фоновый рисунок в ячейке таблицы (CSS)
12 сообщений из 12, страница 1 из 1
Смещается фоновый рисунок в ячейке таблицы (CSS)
    #39825830
IcyWizard
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Таблица 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
Смещается фоновый рисунок в ячейке таблицы (CSS)
    #39825851
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
Смещается фоновый рисунок в ячейке таблицы (CSS)
    #39825865
IcyWizard
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Спасибо, но это фактически рисунок отмасштабирован с 40 до 38 пикселов? Я понимаю что так можно сделать, но проблема в том чтобы бэкграунд передавался без искажений, он потом будет содержать и другие фрагменты изображений, которые изменять нежелательно.

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


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

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


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