如何动态调整 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%;”

再到"switch"图片到下一张你可以把位置改成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>

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

How to dynamically resize CSS button sprites (background image)?

css

background-image

image-resizing

centering

css-sprites