用css的 a:hover img 放大图片时怎么让放大后的图片 从原图片的中心放大
{
width:400px; height:200px;
position:absolute;
z-index:5;}
<a href="#"><img width=40 height=20 src=" "/></a>
或者说说怎么调整图片放大以后的位置也行
没财富值了 希望会的给我讲讲 急用啊 展开
用CSS3中的transfrom:scale{x,y}来放大,如下:
<style>
*{margin:0;padding:0;}
div{border:solid 1px #333;width:40px;height:40px;}
div img{width:40px;height:40px;transition:all 0.3s;}
div img:hover{transfrom:scale{2,2};}//从中心放大两部
</style>
<div><img src="图片地址" alt=""/></div>
扩展资料:
注意事项
transfrom是利用线性代数来存放一个控件(或许是图片)的具体信息.(由于可以通过transfrom直接操作控件.所以肯定直接或者间接的存储着点的信息和控件的大小等信息)
1、移动.左移右移或者上移下移:
CGAffineTransformMakeTranslation(X偏移量, Y偏移量);
CGAffineTransformTranslate(在某个transform的基础上-一般为自身, X偏移量, Y偏移量);
2、改变大小(形变):
CGAffineTransformMakeScale(宽缩放的倍数, 高缩放的倍数);
CGAffineTransformScale(在某个transform的基础上-一般为自身, 宽缩放的倍数, 高缩放的倍数);
可以使用CSS3中的transfrom:scale{x,y}来放大,示例代码如下:
<style>
*{margin:0;padding:0;}
div{border:solid 1px #333;width:40px;height:40px;}
div img{width:40px;height:40px;transition:all 0.3s;}
div img:hover{transfrom:scale{2,2};}//从中心放大两部
</style>
<div><img src="图片地址" alt=""/></div>
CSS3是最新的CSS版本,现代浏览器都支持CSS的大部分属性,在IE中Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。IE6-8是不支持的。
(1)使用css3的 transform:scale(x,y)和transition,缺点是不兼容IE6-IE8,有失真,针对一些其它版本的浏览器需要加私有属性前缀
(2)js实现,缺点:需要写较复杂的代码,需要一定的js水准,但是兼容性好,低版本ie性能问题可以再优化(推荐)
要中心的话,这样写
top:-10px;
left:-20px;