CSS - Использование фонового изображения

Question

Я прочитал руководство по использованию CSS background-attachment и никогда не получаю истинную идею. Тем не менее, сегодня я извлечь урок следующим образом:

.#city-images-div { 
    background: url(../img/100.jpg) no-repeat fixed 0px 0px; 
    position: absolute; 
    top: 2px; 
    left: 2px; 
    width: 557px; 
    height: 374px; 
    cursor: pointer; 
    border: none; 
} 

<div id="city-images-div"></div> 

Приведенный выше код не поможет мне отобразить 100.jpg фоновое изображение.

Если я изменил привязку фона от исправления, чтобы прокрутить, тогда изображение может отображаться. Размер изображения составляет 557x374.

Я не знаю, почему роль фона здесь играет здесь.

Q1> Что такое практическое использование фоновой привязанности

Q2> Почему изображение не обнаруживается, если значение фиксируется и отображается правильно, если значение является прокруткой.

спасибо

// update // 
this is a typo and fix should be fixed. 

Answer 1

Вы пытались использовать "фиксированный" вместо "исправить"?

Что касается практического использования свойств фона css, очевидно, наиболее важным является добавление фона для элемента (как следует из названия), без использования тега img. Вы также можете использовать свойство background, чтобы помочь в создании пользовательских классов для кнопок, элементов навигации и т. Д.

Answer 2

Существует несколько практических применений, но в настоящий момент я не могу придумать.

Что касается того, почему он не работает для вас, он должен быть fixed, а не fix.

Answer 3

Возможно, потому что значение i сот fix, а не fixed.

Answer 4

Я думаю, что у вас есть градиентное фоновое изображение (repeat-x и прочее), чтобы страница выглядела красиво.

Если фон-вложение «фиксированный», то градиент будет прокручиваться с этой страницы, иначе, он остается в верхней

Answer 5

Я считаю, что проблема в том, что ваш Absolute Позиционируется окно создается на некотором расстоянии в верхнем левом углу экрана, достаточно далеко, чтобы изображение вообще не отображалось в окне. Посмотрите, поможет ли эта демонстрация: http://jsfiddle.net/9LLwX/2/

Попробуйте перетащить ящик вокруг. Обратите внимание, что положение фона никогда не изменяется, даже если его перемещает div. Фоны с background-attachment: fixed расположены относительно окна просмотра.