CSS文本旋转

Question

CSS文本旋转

cssrotationtransparency

3

我想在我的图像上叠加一些旋转的文本，但是我遇到了一些困难。这是没有jQuery的代码：http://jsfiddle.net/vCbcz/4/ 问题如下：

- 旋转后，span与div不对齐。 - 在Internet Explorer中，尽管已经定位span并且已将filter: alpha(opacity = 30);添加到CSS中，但背景透明度仍未显示。

编辑：我希望span看起来像http://jsfiddle.net/vCbcz/6/，但其中包含旋转的文本。请不要告诉我将文本放在单独的容器中。

- LostLin

我不确定你所说的“跨度与旋转后的div不对齐”是什么意思... 你能否提供一个应该看起来像什么的图像链接？ - Brian Flanagan

是的，我认为你需要将文本放入另一个容器中。你正在旋转容器，因此容器中的文本也会随之旋转... - Brian Flanagan

我想要旋转文本。但是在旋转后，跨度会向右移动。我希望黑色背景部分仍然保持编辑时所示的位置。 - LostLin

这可能会有所帮助：https://dev59.com/a1LTa4cB1Zd3GeqPcamc - Brian Flanagan

CSS旋转是在元素布局完成后围绕中心进行旋转的。因此，在旋转之前，您需要确保span的中心与旋转中心重合。 - Eric

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard Marskell - Drackir · Accepted Answer

在这个例子中，将的样式设置成left:-25px;可以解决Firefox浏览器中的问题。点击here查看。

对于IE浏览器，你的alpha滤镜没有被应用的原因是第二个filter:覆盖了第一个。如果想要同时应用它们，可以将它们放在同一个filter:中，并用空格分隔，就像这样：filter: alpha(opacity = 30) progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 我注意到在IE浏览器中，left:-25px;会使情况变得更糟，所以也许你需要一些条件注释或CSS hack来解决它。(很糟糕!)

请注意，这在Opera浏览器中根本不起作用。

在这里，我做出了一些修改，修复了IE的bug，并支持了Opera和其他一些可能支持CSS3 transform属性的浏览器。