Question

我有一个背景图片，我希望使用background-size: cover;覆盖该元素但是，我还希望将其向两个方向扩展110％，超越什么{ {1}}确实如此，以便我随后可以使用cover移动它。

换句话说，我希望background-position将周围的div视为两个方向都大110％。

有没有办法在CSS中完全执行此操作？

如果我理解正确，这将是一种方法，但background-size: cover不是标准的CSS3：

max()

Answer 1

我已经创建了一个Fiddle供您查看。我相信我理解正确的问题，但如果我不在基地，请告诉我。

我将包含.hero-container { overflow: hidden; width: 100%; height: 100vh; } #hero { background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; width: 100%; height: 110vh; margin-bottom: 0px; right: 0; }的div包装在另一个div中，如下所示：

height: 110vh

并应用如下样式：

.hero-container

通过更改#hero来玩弄小提琴，让我知道这是否是您正在寻找的，或者我是否至少在正确的轨道上。

希望这有帮助！

编辑*：我删除了转换和填充，因为这些不是必需的。

如果您想使用具有固定高度的容器执行此操作，您可以将create(Entity entity)高度更改为500px或其他内容，然后在{{1}的高度中使用110％而不是110vh } div。

Answer 2

如果我确实正确理解了您的问题，我想您可以在下面尝试：

.box {
  width: 40vw;
  height: 40vh;
  background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center;
  background-size: cover;
}

.box:hover {
  background-size: 140%;
}

<div class="box"></div>

如何缩放背景图像以覆盖，乘以额外的缩放因子？

2 个答案: