css background设置的背景图部分会旋转90°展示的解决办法

html-css08

css background设置的背景图部分会旋转90°展示的解决办法,第1张

最近在做移动端开发的时候,有时候会遇到设置的背景图被莫名其妙的旋转了90°,这是为什么呢?

原因是这个图片携带了exif信息,去掉这个信息就可以了,图片也就恢复正常显示了,在src的路径后面加上参数imageMogr2/auto-orient即可;例如:<img src="123.png?imageMogr2/auto-orient"/> 

css实现图片有一定角度进入图层,开发的时候有个图片用背景图要旋转一定角度如果只给.question添加背景,通过transfromrotate肯定是会影响文字的展示,所以把背景图放到伪类中进行旋转就可以解决这个问题了。

这个要用css3,ie要用滤镜,举例顺时针旋转90度

-moz-transform:rotate(90deg)

-webkit-transform:rotate(90deg)

transform:rotate(90deg)

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

上面代码前三行是css3,第四行是ie滤镜的简单的90度的整数倍旋转方式,更加复杂的度数要用矩阵,需要的话可以查查资料

注:左旋把90改为-90,rotation=1改为rotation=3.

注:如果你的层上还有文字什么的,也会被旋转,所以有文字的话,和背景图放在不同的层上,旋转有背景图的层