我想添加一个背景图像到我的页面，覆盖水平，但有一个高度限制。
问题是，如果我设置了一个高度，看起来我不能设置水平覆盖。 我明白，如果覆盖水平，并有高度限制，底部部分将被夹住（如果工作）。
我在用掩护来避免扭曲图像。
null
.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>null
有没有方法设置背景图像的高度，同时水平地覆盖视口（并且不需要使用position:fixed)？
伪元素很容易做到这一点:
null
.has-background {
background-size: 0;
background-position: 50%;
background-image: url("https://picsum.photos/id/430/1230/500");
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: inherit;
background-position: inherit;
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>
您可以在.has-background类上设置height，这样它就可以固定容器元素& 保持宽度为100%，因为div是块元素。
null
.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>
您可以使用css属性
max-height: px;
这是一份文件
