Поворот текста CSS - PullRequest
Новая
       13

Поворот текста CSS

3 голосов
/ 17 марта 2011

Я пытаюсь наложить какой-то повернутый текст поверх моих изображений, но у меня возникли некоторые трудности с этим.Вот мой код без всего jQuery: http://jsfiddle.net/vCbcz/4/

Проблемы:

  • Диапазон не совпадает с div после поворота
  • Прозрачность фона не отображается в Internet Explorer, несмотря на то, что диапазон расположен, и я добавил filter: alpha(opacity = 30); к своему CSS.

РЕДАКТИРОВАТЬ: я хотел бы, чтобы пролеты выглядели как http://jsfiddle.net/vCbcz/6/ кроме с повернутым текстом.Пожалуйста, не говорите мне, чтобы поместить текст в отдельный контейнер.

1 Ответ

2 голосов
/ 17 марта 2011

Установка left:-25px; на пролетах исправляет это для меня в Firefox. Смотри здесь .

Редактировать
Что касается IE, причина, по которой ваш альфа-фильтр не применяется, заключается в том, что ваш второй filter: перезаписывает ваш первый. Если вы хотите, чтобы они оба применялись, вы помещаете их в один и тот же filter:, разделенный пробелом, например:
filter: alpha(opacity = 30) progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Я заметил, что в IE left:-25px; ухудшает ситуацию, поэтому, возможно, вам придется сделать несколько условных комментариев или CSS-хаки, чтобы обойти это. (Icky!)

Просто предупреждение, в Opera это вообще не работает.

Редактировать 2
Вот мои изменения с исправлением ошибок IE и поддержкой Opera и, возможно, других браузеров, если они поддерживают свойство CSS3 transform.

...