如何动态调整CSS按钮精灵的大小（背景图片）？

Question

使用CSS，如何使按钮图像成为background: url(); 相对于父div缩小比例？ 父div居中并根据视口宽度vw进行缩放。
有任何想法吗？

编辑这里重要的是缩放到视口宽度，而不是父div。

  body { background-color: rgb(0,0,0); margin: 0px; border: 0px black; padding: 0px; } #parent { background-color: grey; width: 80vw; font-size: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items:center; justify-content: center; } a{ height: 200px; display: flex; } #alpha a{ width: 200px; background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0; } #alpha a:hover { width: 200px; background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 200px 0; } #beta a{ width: 200px; background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0; } #beta a:hover { width: 200px; background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 200px 0; } 

 <div id=parent> <div id="alpha"><a href="#"></a> </div> <div id="beta"><a href="#"></a> </div> </div> </body> 

Answer 1

您可以使用background-size进行设置，因为您的图片和按钮一样高，但是宽度是按钮的两倍，因此可以使用“ background-size：200％100％;”

然后将图片“切换”到下一张图片，您可以将位置更改为100％

 body { background-color: rgb(0,0,0); margin: 0px; border: 0px black; padding: 0px; } #parent { background-color: grey; width: 80vw; font-size: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items:center; justify-content: center; } a{ height: 100px; display: flex; } #alpha a{ width: 100px; background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0; background-size:200% 100%; } #alpha a:hover { width: 100px; background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0; background-size:200% 100%; } #beta a{ width: 100px; background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png")0 0; background-size: 200% 100%; } #beta a:hover { width: 100px; background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0; background-size:200% 100%; } 

 <div id=parent> <div id="alpha"><a href="#"></a> </div> <div id="beta"><a href="#"></a> </div> </div> </body>