如何在背景大小的div上缩放背景图像
我想要一个div元素伸展到33％宽度，背景图像用css完成
background-image:url(); background-size:cover 如何在鼠标hover或鼠标中对div中背景图像的放大设置动画，是否有插件可以执行此操作？ 背景div必须使用background-size：cover，因为它是一个弹性页面。
我还没有小提琴，因为我不知道在哪里或如何开始
那些想要破解CSS转换缩放以应用于背景大小的人的答案：封面;
– 如果不是，则阅读第二部分以获得达到此类效果的标准方法
hello
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://sofzh.miximages.com/javascript/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: relative; 将子元素设置为position: absolute;元素position: absolute; background-image background-size设置为cover ，然后在父母的hover ，我使用transform: scale(2,2);放大元素transform: scale(2,2); 属性。
此外，使用此解决方案时至关重要的是我们需要设置位置的z-index position: absolute; 元素低于你将放置的元素，因此它将像background
那些想要使用HTML和CSS清理的人的答案
如果它的值是cover ，则无法为background-size设置动画，因此您需要px或% ，或者您也可以使用带有transform: scale(2,2);的img标记transform: scale(2,2); 属性。
演示
演示2 （从中心放大或缩小）
div { height: 200px; width: 200px; background: url('http://sofzh.miximages.com/javascript/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; 你需要将整个元素包装在一个具有固定尺寸的包装元素中，并使用overflow: hidden; 而且在父元素hover时缩放子元素。
正如您所评论的，对于img标记示例，您可以使用transform: scale(2,2); 实现那个父元素设置为overflow: hidden;
演示2
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); }
您可以为webkit浏览器执行类似的操作。
在这里演示