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％，你可以改为将其设定为一个尺寸。设置大小会更容易，然后你可以完全按照自己的意愿制作它。

E.G。

if( control instanceof Button && ( control.getStyle() & SWT.CHECK ) != 0 ) {
  Button checkbox = ( Button )control;
  boolean selected = checkbox.getSelection();
  ...
}

等

css背景大小封面

2 个答案: