Дайте css3 повернуться в DIV в Chrome, затем background-attachment: исправлена ​​ошибка создания

Question

Мой background-attachment:fixed работает нормально.Но когда я определяю CSS3, поворачиваем на этом DIV и прокручиваем вниз, тогда background-attachment:fixed перестает работать.

Проверьте это http://jsfiddle.net/P3jS4/

Сейчас я работаю на chrome18 .

Когда вы удаляете вращение css, тогда background-attachment: fixed работает нормально.

http://jsfiddle.net/P3jS4/2

Answer 1

Это не ошибка.

Вы пытаетесь что-то сделать спецификация еще не определена.В комментариях говорится:

Что делают фиксированные фоны в преобразованиях?Вероятно, им следует полностью игнорировать преобразование, поскольку - даже преобразованный - объект должен действовать как «иллюминатор», через который фиксированный фон можно рассматривать в его первоначальном виде.

Проблема заключается в том, что «фиксированный»"означает относительно окна просмотра (окна браузера), а не родительского элемента.Окно просмотра не вращается, и существует только одно окно просмотра.

Учитывая, что спецификация не определила, каков правильный подход, тогда мы не знаем, что вы подразумеваете под "не работает".Если это «работает» в других браузерах, это потому, что они приняли решение, не дожидаясь обновления спецификации.Вы должны обновить свой вопрос, чтобы отразить желаемое поведение, а не то, «работает» оно или нет.

На этом этапе нет смысла ожидать исправления браузера, поскольку вы работаете за пределами спецификации.Я предлагаю изменить ваш код, чтобы вы следовали спецификации одним из следующих способов:

• Использование img вместо фона
• Использование canvas или SVG
• Вращение фона в программе рисования
• Размещение фона на элементе за повернутым элементом

Если ни один из них не может быть использован, и другие обходные пути недоступнытогда вы отвечаете, что это невозможно сделать.

ОБНОВЛЕНИЕ: Я только что понял, что спецификация, которую я связал, была заменена более новой версией , которая уточняет ожидаемуюповедение как:

На фиксированные фоны влияет любое преобразование, заданное для корневого элемента, а не любые другие преобразования.

Таким образом, элемент с фиксированным фоном все еще действует как "«иллюминатор» в изображение, которое прикреплено к окну просмотра и трансформируется в элемент, влияющий на иллюминатор, а не на фон позади него.С другой стороны, преобразование корневого элемента будет по-прежнему преобразовывать все на странице, а не все, кроме фиксированных фонов.

Предполагая, что под "не работает" вы имеете в виду, что фон не вращается тогдато, что вы делаете, не будет работать в соответствующем браузере.

Answer 2

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

Эта информация учитывает, что они не могут работать вместе , но давайте заставим их работать отдельно .

Как только у вас будет реальное содержимое под изображением, тогда будет предотвращаться касание нижнего правого угла этого изображения в нижнем правом углу окна просмотра браузера, которое является последним допустимым местом для использования fixed значение Потому что после этого это земля пустоты .

Вот скрипка !

Эта обновленная скрипка показывает поворот в противоположном направлении.

После нашего обсуждения ваших точных требований, у меня теперь есть то, что вы ищете. Этот метод полностью переписан и использует эффект маски в сочетании с вращением, чтобы позволить внутреннему изображению оставаться без вращения ... но он также может иметь свое собственное вращение!

Вот NEW Fiddle с множеством комментариев, объясняющих CSS.

Обновление статуса: Ни один из моих ответов не верен, потому что я не выполнил полные требования ОП. В настоящее время использование поворота с фиксированным изображением является нестандартным методом, который ранее обсуждался выше по ссылке info . Возможно, метод jQuery Parallax подходит для этого уникального и сложного требования.

Answer 3

Новый ответ для последних событий: 4 июля 2012 г.

---

У меня есть в процессе разработки jsFiddle , которым я хотел бы поделиться с вами и досрочное освобождение .

Он должен дать вам идеи о том, как реализовать этот конкретный стиль.

В частности, он имеет эффект Параллакс .

Обратите внимание, что в незавершенной демонстрации изображение может быть установлено в div по-разному (оно установлено фиксированным и повторяется), используйте CSS3 contain или cover, например, для другого эффекта параллакса для отображаемого контента .

Оно не ограничивается изображениями, и вместо этого можно использовать любой статический контент, поскольку этот объект никогда не поворачивается / не поворачивается, что не приводит к попаданию в процессор браузера.

jsFiddle Снимок экрана (он был захвачен уменьшенным):
Маска намеренно показана на изображении ниже, она должна соответствовать цвету фона. Для некоторых браузеров вы можете использовать свойство CSS3 border-image вместо цветной маски (поскольку желтая маска на самом деле является границей!).

---

Пример 1:
Вот jsFiddle с настроенной маской, непрозрачностью и дополнительным заполнением (для некоторого отображения по назначению.).

---

Пример 2:
Вот jsFiddle , как указано выше, с содержимым, показанным с помощью метода CSS3 cover, чтобы проиллюстрировать эффект выталкивания для всей веб-страницы .

---

Мне нужно скоро вернуться к этому проекту. В то же время, пожалуйста, не стесняйтесь использовать эту раннюю работу, как вы хотите. Ура!

Answer 4

Я думаю, что вам нужно удалить свойство background: ... fixed 0 0 ;, чтобы изображение вращалось правильно, не теряя его при прокрутке. Скрипка для этого будет this ; в противном случае вы можете просто сделать прямоугольное изображение с повернутым прямоугольником внутри, которое будет прозрачным. Это был бы образ взлома для CSS, который вы пытаетесь выполнить.

Answer 5

Изменение свойства фона на свойство содержимого

.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;
}​