css背景大小封面

Question

黑。这听起来很简单，但如果你处理动态内容则不是。 我有一个包含容器的背景图像的容器。 悬停后，背景大小应该增大2％（或者其他方式并不重要） 有没有办法实现这个目标？

.container 
    background-size: 102% !important //here it should be cover + 2% 
    background-position: center 
    +transition(all 0.3s ease-in-out) 
.container:hover 
    background-size: 100% !important //here it should be cover 

Answer 1

恐怕你不能用calc或其他任何类型的操作来实现102％的操纵。我看到它的方式有两种选择。一种是使用JavaScript和模拟封面的行为，另一种是将图像设置为此容器内的伪元素。像这样的东西。

.container { 
    position: relative; 
    overflow: hidden; 
    width: ###; 
    height: ###; 
} 

.container:before { 
    position: absolute; 
    content: ''; 
    width: 100%; 
    height: 100%; 
    background: url('bg.png') cover center; 
} 

.container:hover:before { 
    transform: scale(1.02); 
} 

这可能是一个有点麻烦与容器的内容打，但你可以做到这一点创建另一个绝对定位.content DIV里面，这只是横跨整个区域的最简单的事情。

Answer 2

取而代之的是让它增大2％，你能不能把它做成一个尺寸。设置尺寸会更容易，然后你就可以完全按照你的要求制作。

E.G.

background-size: 120px 100px; 
background-position: center; 

等