Настройка фонового положения фрагментов изображения

Я пытаюсь сделать головоломку из фонового изображения с пронумерованными частями. Части в конечном итоге будут перемещаться с помощью javascript. Прямо сейчас, я застрял, просто пытаясь расположить кусочки этого изображения. В html есть div с id, называемым puzzlearea, и я добавил дочерние элементы с javascript, который, как я знаю, работает, потому что он отображает новые куски div и их числа. CSS отказывается перемещать фигуры относительно этого фона, и мои две тестовые части застряли в верхнем левом углу, казалось бы, игнорируя мои значения фоновой позиции. Вот CSS:Настройка фонового положения фрагментов изображения

body { 
    text-align: center; 
    font-family: cursive; 
    font-size: 14pt; 
} 

#puzzlearea { 
    width: 400px; 
    height: 400px; 
    margin: auto; 
    position: relative; 
    background-image: url("planck-image.png"); 
} 

.tile { 
    font-size: 40pt; 
    color: red; 
    line-height: 70pt; 
    width: 90px; 
    height: 90px; 
    border: 5px solid black; 
    background-position: -200px -200px; 
    position: fixed; 
}

Update: Screenshot.

Вы бы иметь какие-либо идеи относительно того, почему позиционирование не происходит?

источник

2016-03-31 Gragh

Было бы полезно, если бы вы показали изображение того, что происходит (и, возможно, того, что вы ожидаете). Поскольку мы не видим planck-image.png, трудно догадаться, что нужно. – Harry

Хорошо, я добавил ссылку на скриншот. Я недостаточно авторитет, чтобы просто вставить изображение здесь. – Gragh

Рабочий пример (jsfiddle.net или stacksnippets) полезен. Однако ваше изображение в gdrive нуждается в разрешении. Не разделяйте так, не полезны. Говоря о вашей проблеме, ** фиксированное позиционирование прикрепляется к корневому документу, а не к родительскому относительному элементу **. Вместо этого перейдите на 'absolute' –

Вам необходимо position: absolute на .tile, чтобы разместить их с параметрами top/bottom/left/right (и вам тоже нужны).

fixed позиция относится к области просмотра, а не к родительскому элементу.

источник

2016-03-31 11:43:01 Johannes

Хорошо, кажется, мне не хватало параметров слева/справа и т. Д. Ошибка новичков. Абсолют прав. Спасибо за вашу помощь! – Gragh

Настройка фонового положения фрагментов изображения

ответ

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