My background-attachment:fixed работает нормально. Но когда я определяю CSS3, вращаем на этом DIV и прокручиваем вниз, тогда background-attachment:fixed перестает работать.
Отметьте http://jsfiddle.net/P3jS4/
Сейчас я работаю над chrome18.
Когда вы удаляете поворот css, фоновая привязка: исправлена, работает отлично.
Это не ошибка.
Вы пытаетесь сделать что-то спецификация еще не определена. В комментариях говорится:
Что фиксируют фоны в преобразованиях? Они должны, вероятно, полностью игнорировать преобразование, поскольку - даже преобразованный - объект должен действовать как "иллюминатор", через который фиксированный фон может следует рассматривать в оригинальной форме.
Проблема заключается в том, что "fixed" означает относительно окна просмотра (окно браузера), а не родительский элемент. Видовой экран не вращается и имеется только один видовой экран.
Учитывая, что спецификация не определила, что такое правильный подход, мы не знаем, что вы подразумеваете под "нерабочим". Если он "работает" в других браузерах, потому что они сделали суждение, не дожидаясь обновления спецификации. Вы должны обновить свой вопрос, чтобы отразить поведение, которое вы хотите, а не "работает" или нет.
На данном этапе нет смысла ожидать исправления браузера, поскольку вы работаете за пределами спецификации. Мое предложение состоит в том, чтобы пересмотреть ваш код, чтобы вы следовали спецификации через один из следующих способов:
img, а не фонаЕсли ни одно из них не может быть использовано, и никакие другие обходные пути не доступны, тогда ваш ответ заключается в том, что он не может быть выполнен.
ОБНОВЛЕНИЕ: Я только понял, что спецификация, которую я связал, была превышена более новой версией, которая уточняет ожидаемое поведение как:
Фиксированный фон зависит от любого преобразования, указанного для корневого элемента, а не любых других преобразований.
Таким образом, элемент с фиксированным фоном все еще действует как "иллюминатор", в изображение, которое фиксируется в окне просмотра, и преобразуется на элемент влияет на иллюминатор, а не на задний план. На с другой стороны, преобразование корневого элемента будет по-прежнему трансформироваться все на странице, а не все, кроме фиксированного фоны.
Предполагая, что "не работает" означает, что фон не вращается, то то, что вы делаете, не будет работать в соответствующем браузере.
У меня есть рабочее решение, которое может использовать как фиксированный наряду с преобразованием rotate.
Этот info учитывает, что они не могут работать вместе, но пусть они работают отдельный.
После того, как под изображением будет реальный контент, он будет препятствовать тому, чтобы нижний правый угол этого изображения касался нижнего правого угла окна просмотра браузеров, который является последним допустимым местом для использования значение fixed. Потому что после этого это земля пустоты.
Здесь fiddle!
Эта обновленная скрипта показывает поворот в противоположном направлении.
По нашему обсуждению ваших конкретных требований, теперь у меня есть то, что вы ищете.
Этот метод представляет собой полную перезапись и использует эффект маски в сочетании с вращением, чтобы внутреннее изображение оставалось не вращенным... но это тоже может заставить его вращаться!
Здесь NEW Fiddle с большим количеством комментариев, объясняющих CSS.
Обновление состояния: Ни один из моих ответов не верен, потому что я не понял требования к полной версии OP. В настоящее время использование поворота с фиксированным изображением является нестандартным методом, который ранее обсуждался выше по ссылке info. Возможно, метод jQuery Parallax подходит для этого уникального и сложного требования.
Новый ответ для последних изменений: 4 июля 2012 г.
У меня есть jsFiddle работа в процессе, с которым я хотел бы поделиться с вами и отпустите ранний.
Он должен дать вам идеи о том, как выполнить этот особый стиль.
В частности, он имеет эффект Parallax.
Примечание в незавершенном демоверсии изображение может быть установлено в div по-разному (оно установлено фиксированным и повторным), используйте CSS3 contain или cover, например, для другого эффекта Parallax для отображаемого содержимого.
Это не ограничивается изображениями, и любое статическое содержимое может использоваться вместо этого, поскольку этот объект никогда не вращается/вращается против часовой стрелки, что не приводит к поражению процессора.
Скриншот jsFiddle (он был снят с экрана):
Маска намеренно показана на изображении ниже, она должна соответствовать цвету фона. Для избранных браузеров вы можете использовать свойство CSS3 border-image вместо цветной маски (так как желтая маска на самом деле граничит!).
Пример 1:
Здесь jsFiddle с маской, помутнения и дополнительные корректировки дополнены (для того, чтобы рассматривать их как предполагаемые).
Пример 2:
Здесь jsFiddle, как указано выше, с содержимое, показанное с помощью метода CSS3 cover, чтобы проиллюстрировать эффект пробивки для всей веб-страницы.
Мне нужно вернуться к этому проекту в ближайшее время. В то же время, пожалуйста, не стесняйтесь использовать эту раннюю работу, как хотите. Ура!
Я думаю, что вам нужно удалить свойство background: ... fixed 0 0 ;, чтобы изображение правильно вращалось, а при прокрутке оно не терялось. Скрипка для этого будет this; иначе вы могли бы просто создать прямоугольное изображение с вращающимся прямоугольником внутри него, которое будет прозрачным. Это будет взлом изображения для css, который вы пытаетесь выполнить.
Измените свойство фона на свойство содержимого
.pic{
background:url(http://cssglobe.com/lab/angled/img.jpg) fixed 0 0;
height:300px;
-webkit-transform: rotate(-10deg);
border:1px solid green;
}
к
.pic{
content:url(http://cssglobe.com/lab/angled/img.jpg) fixed 0 0;
height:300px;
-webkit-transform: rotate(-10deg);
border:1px solid green;
}