为背景图像设置最大高度但水平覆盖

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

您可以使用 css 属性

max-height: px;

这是一个documentation

Answer 2

您可以在 .has-background class 上设置高度，这样它将固定容器元素的高度并保持宽度 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

伪元素可以轻松做到这一点：

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

为背景图像设置最大高度但水平覆盖

Set a maximum height for background-image but with horizontal cover

html

css

background-image