对于那些想要破解CSS过渡缩放以应用于背景尺寸的人的答案:
-否则,请阅读第二部分以了解达到这种效果的标准方法
<div > <div></div> <p>hello</p></div>html, body { height: 100%;}div.wrap { height: 33%; width: 33%; overflow: hidden; position: relative;}div.wrap > div { position: absolute; height: 100%; width: 100%; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg'); -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; z-index: -1;}div.wrap:hover > div { -moz-transform: scale(2,2); -webkit-transform: scale(2,2); transform: scale(2,2); }演示 (使用background-size: cover;
过渡/缩放元素)
至于你说的是转变的
cover大小是必要的,所以我来了,我告诉你之前,我在这里有下嵌套子元素的伎俩
position:relative;在那里我有子元素设置为元素
position: absolute;与
background-image具有
background-size设置为
cover,然后
hover父,我使用
transform: scale(2,2);属性将元素放大。
另外,使用此解决方案时,至关重要的一点是,我们需要
z-index将
position:absolute;元素的设置为低于要放入其中的元素,因此它的作用就像
background
回答那些想要使用HTML和CSS的人
你不能动画显示
background-size,如果它的价值是
cover这样无论是你需要
px或者
%,或者你也可以使用一个
img标签与
transform:scale(2,2);属性。
演示2(从中心放大或缩小)
div { height: 200px; width: 200px; background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg'); background-size: 100% 100%; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s;}div:hover { background-size: 150% 150%;}如果要坚持下去,
background-size: cover;则必须将整个元素包装在具有固定尺寸的wrapper元素内,
overflow:hidden;然后再缩放
hover父元素的子元素。
正如您所评论的那样,对于
img标记示例,可以使用
transform: scale(2,2);将其父元素设置为
overflow: hidden;
div { height:300px; width: 300px; overflow: hidden;}div img { -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);}div:hover img { -moz-transform: scale(2,2); -webkit-transform: scale(2,2); transform: scale(2,2);}


