设置背景图像的最大高度，但使用水平封面

Question

我想在页面中添加一个背景图像，水平覆盖，但有高度限制。

问题是，如果我设置了一个高度，看起来我无法设置为水平覆盖。我知道，如果水平覆盖，并且有高度限制，底部会被夹住(如果工作的话(。

我用封面来避免图像失真。

.has-background {
background-size: cover; /*I want to limit to 200px*/
background-position: 50%;
background-image: url("https://picsum.photos/id/430/1230/500");
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.css" rel="stylesheet" />
<div id="app" class="has-background">
<div class="hero is-medium">
<div class="hero-body>
<p class="subtitle has-text-centered">Subtitle</p>    
</div>
</div>

<div class="hero">
<div class="hero-body>
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
</div>
</div>
</div>

有没有办法在水平覆盖视口的同时设置背景图像的高度(并且不需要使用position: fixed的新元素(？

Answer 1

伪元素可以很容易地做到这一点：

.has-background {
position: relative;
z-index: 0;
}
.has-background::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
height: 100%;
max-height: 200px;
background-image: url("https://picsum.photos/id/430/1230/500");
background-position: center;
background-size: cover;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.css" rel="stylesheet" />
<div id="app" class="has-background">
<div class="hero is-medium">
<div class="hero-body">
<p class="subtitle has-text-centered">Subtitle</p>
</div>
</div>
<div class="hero">
<div class="hero-body">
<p class="subtitle has-text-centered">Subtitle</p>
<p class="subtitle has-text-centered">Subtitle</p>
<p class="subtitle has-text-centered">Subtitle</p>
<p class="subtitle has-text-centered">Subtitle</p>
<p class="subtitle has-text-centered">Subtitle</p>
<p class="subtitle has-text-centered">Subtitle</p>
<p class="subtitle has-text-centered">Subtitle</p>
<p class="subtitle has-text-centered">Subtitle</p>
<p class="subtitle has-text-centered">Subtitle</p>
<p class="subtitle has-text-centered">Subtitle</p>
</div>
</div>
</div>

Answer 2

您可以在.has-background类上设置高度，这样它将固定容器元素的高度&将宽度保持为100%，因为div是块元素。

.has-background {
background-size: 100% 200px; /*I want to limit to 200px*/
background-position: fixed;
background-image: url("https://picsum.photos/id/430/1230/500");
background-repeat: no-repeat;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.css" rel="stylesheet" />
<div id="app" class="has-background">
<div class="hero is-medium">
<div class="hero-body>
<p class="subtitle has-text-centered">Subtitle</p>    
</div>
</div>

<div class="hero">
<div class="hero-body>
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
<p class="subtitle has-text-centered">Subtitle</p>  
</div>
</div>
</div>

Answer 3

您可以使用css属性

max-height: px;

这是文档