如何使网页里的图片倾斜
发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
怎么使网页里的图片倾斜?
效果如上。
不能用CSS3,因为好多浏览器还是IE6
------解决方案--------------------
<img src="http://avatar.profile.csdn.net/A/9/7/2_theforever.jpg"
style="filter:progid:DXImageTransform.Microsoft.Matrix( SizingMethod='auto expand',FilterType=bilinear,Dx=0,Dy=0, M11=0.9,M12=0.5,M21=-0.5,M22=0.9)">
------解决方案--------------------
filter : progid:DXImageTransform.Microsoft.Matrix(SizingMethod=auto expand,FilterType=bilinear,Dx=0,Dy=0,M11=1,M12=-0.2,M21=0.2,M22=1);
Matrix兼容性:IE5.5+
语法:
CSS filter : progid:DXImageTransform.Microsoft.Matrix ( enabled=bEnabled , SizingMethod=sMethod , FilterType=sType , Dx=fDx , Dy=fDy , M11=fM11 , M12=fM12 , M21=fM21 , M22=fM22 )
Scripting object.style.filter = "progid:DXImageTransform.Microsoft.Matrix ( sProperties ) "
属性:
enabled Enabled 设置或检索滤镜是否激活。
SizingMethod SizingMethod 设置或检索容器是否改变尺寸去适应目标图像。
FilterType FilterType 设置或检索定义新内容的像素的方法。
Dx Dx 设置或检索线性转换的向量增加 X 。
Dy Dy 设置或检索线性转换的向量增加 Y 。
M11 M11 设置或检索线性转换的第一行/第一列矩阵输入。
M12 M12 设置或检索线性转换的第一行/第二列矩阵输入。
M21 M21 设置或检索线性转换的第二行/第一列矩阵输入。
M22 M22 设置或检索线性转换的第二行/第二列矩阵输入。
说明:
使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。
使用此滤镜可以建立下列效果:
1. 左右反转。将 M11 和 M12 的值取负。
2. 上下反转。将 M21 和 M22 的值取负。
3. 改变尺寸。将 M11 和 M12 和 M21 和 M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。
使用 padding 属性能够使最终图像边角被剪切的机会降到最小。
示例:#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(enabled='false') ; }
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod="auto expand"); }
------解决方案--------------------
下面的差不多就是楼主那个效果
<style>
body {background:grey;}
img {border:8px solid white;}
</style>
<img src="http://avatar.profile.csdn.net/A/9/7/2_theforever.jpg"
style="filter:progid:DXImageTransform.Microsoft.Matrix( SizingMethod='auto expand',FilterType=bilinear,Dx=0,Dy=0, M11=0.9,M12=0.5,M21=-0.5,M22=0.9)">
<img src="http://avatar.profile.csdn.net/noavatar_2.gif"
style="filter:progid:DXImageTransform.Microsoft.Matrix( SizingMethod='auto expand',FilterType=bilinear,Dx=0.3,Dy=0, M11=0.9,M12=0.2,M21=0.3,M22=0.8)">
<br>
<img src="http://avatar.profile.csdn.net/7/1/1/2_dalmeeme.jpg"
style="filter:progid:DXImageTransform.Microsoft.Matrix( SizingMethod='auto expand',FilterType=bilinear,Dx=0,Dy=0, M11=0.9,M12=0.5,M21=-0.2,M22=0.9)">
<img src="http://avatar.profile.csdn.net/noavatar_2.gif"
style="filter:progid:DXImageTransform.Microsoft.Matrix( SizingMethod='auto expand',FilterType=bilinear,Dx=0.3,Dy=0, M11=0.9,M12=0.2,M21=0.3,M22=-0.5)">
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
标签的值用parseInt提取报错
报错如图:
不能理解为什么说这个值是undefined类型
代码如下
<!DOCTYPE html>
<html>
<head...
-
jquery解绑元素事件
想的想了,查的查了,是在不知道该怎么做了。
dom元素是动态生成的,生成之后给body绑定了keydown事件,当keydown触...
-
请教jquery.artDialog 跳转问题
我想实现这样的效果
a页面跳转到b页面进行判断,如果正确,跳转到新页面,如果错误就返回上一页
js的...
-
你不知道的JavaScript--Item21 漂移的this
而在 JavaScript 中,this 是动态绑定,或称为运行期绑定的,这就导致 JavaScript 中的 this...
-
如何对html的富文本编辑器已有界面进行修改 跪等
我是新手后台开发,js就会很基本的,领导让我改一下tinymce的上传图片按钮 里面的...
-
求java写的导入导出功能,最好有源码,急,谢谢啦!!!
不需要用到什么框架,在servlet中写入方法即可,通过在jsp页面选择excel文件,然后点击导入...
-
java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/LoopTag 解决方法
java.lang.NoClassDefFoundError: javax/servl...
-
Sublime Text 最佳插件列表(转)
Package Control 安装方法
首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴...
-
表格操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit...
-
你真的了解 console 吗
对于前端开发者来说,在开发过程中需要监控某些表达式或变量的值的时候,用 debugger 会显得过于笨重,取而...