css - 如何动态调整 CSS 按钮 Sprite (背景图片)的大小？

Question

使用 CSS，如何使按钮图像 background: url(); 相对于父 div 缩小？父 div 居中并设置为根据视口(viewport)宽度 vw 缩放。
有什么想法吗？

编辑这里重要的是缩放到视口(viewport)宽度，而不是父 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>