5

我有一个背景图像，我想使用它来覆盖元素，background-size: cover;但是，我还想在两个方向上将其放大 110%，超出实际操作范围cover，以便随后可以使用background-position.

换句话说，我想background-size: cover将周围的 div 视为它在两个方向上都大 110%。

有没有办法纯粹在 CSS 中做到这一点？

如果我理解正确，这将是一种方法，但max()不是标准的 CSS3：

background-size: max(auto 110%) max(auto 110%);
4

2 回答 2

5

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

我像这样包装了background-image另一个div中的div：

<div class="hero-container">
    <div class="row" id="hero"></div>
</div>

并像这样应用样式：

.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;
}

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

希望这可以帮助！

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

如果您想使用具有固定高度的容器执行此操作，您可以将.hero-container高度更改为 500px 或其他内容，然后在#herodiv 的高度中使用 110% 而不是 110vh。

于 2015-12-02T20:35:12.107 回答
1

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

.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>

于 2021-01-05T06:45:11.667 回答