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

我担心你无法通过计算或任何类型的操作来操纵封面属性来实现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％，你可以改为将它设定为一个尺寸。 设置大小会更容易，然后你就可以完全按照自己的意愿制作它。

例如

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

等等