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

html-css045

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

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

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

这个要用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.

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

css的旋转属性：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

div{

background:black

width: 150px

height: 150px

}

div:hover{

transform:rotate(45deg)

/*旋转45度*/

transition:1s

/*过渡时间1s*/

}

</style>

</head>

<body>

<div></div>

</body>

</html>