Как динамически изменить размер спрайтов кнопок CSS (фоновое изображение)? - PullRequest
Новая
       28

Как динамически изменить размер спрайтов кнопок CSS (фоновое изображение)?

0 голосов
/ 11 июня 2018

Используя CSS, как я могу сделать кнопки background: url(); уменьшенными по сравнению с родительским div?Родительский div центрируется и устанавливается в соответствии с шириной области просмотра vw.
Есть идеи?

РЕДАКТИРОВАТЬ Что здесь важно, это масштабирование до ширины области просмотра, а не родительского деления. 

   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>

1 Ответ

0 голосов
/ 11 июня 2018

Вы можете использовать размер фона, чтобы установить это, так как ваши изображения имеют высоту, равную кнопкам, но в два раза больше ширины, вы можете использовать '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>
...