Question

如何与background-size: cover;具有相同的效果，但具有百分比值。我试过了

background-size: auto 100%;

但这并不相似。现在你可能会问，为什么我不是简单地使用background-size: cover;，这是因为我想为背景图像设置动画，而你无法从cover动画到%值。

任何帮助都非常感激。

Answer 1

看一下Here, David Walsh Background Animation，他使用背景位置：0 0;

 @keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
  }

#animate-area   { 
width: 560px; 
height: 400px; 
background-image: url(bg-clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;

animation: animatedBackground 40s linear infinite;
 }

Answer 2

百分比+自动在某些情况下会起作用，但不是全部。 cover值自动将宽度或高度设置为100％，以便在保持宽高比的同时另一个尺寸适合或溢出容器。使用百分比+自动，你需要找出适合自己的一面：

div {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid #CCC;
}
.box-port {
  width: 300px;
  height: 150px;
}
.box-land {
  width: 150px;
  height: 300px;
}
.img-port {
  background-image: url(http://dummyimage.com/400x200/CCC/000);
}
.img-land {
  background-image: url(http://dummyimage.com/200x400/CCC/000);
}
.size-full-width {
  background-size: 100% auto;
}
.size-full-height {
  background-size: auto 100%;
}

<p>Using <code>background-size: auto 100%</code> for:</p>
<div class="img-port box-port size-full-height">portraint inside portrait (pass)</div>
<div class="img-land box-port size-full-height">landscape inside portrait (fail)</div>

<p>Using <code>background-size: 100% auto</code> for:</p>
<div class="img-port box-land size-full-width">portraint inside landscape (fail)</div>
<div class="img-land box-land size-full-width">landscape inside landscape (pass)</div>

我能想到的唯一解决方案是比较容器的纵横比和背景图像的纵横比，然后使用background-size: 100% auto或background-size: auto 100%。

给出背景大小：通过百分比值覆盖效果

2 个答案: