Question

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

问题在于，如果我设置了高度，则好像无法设置为水平遮盖。我知道，如果水平覆盖并且有高度限制，则底部会被修剪（如果可以）。

为了避免图像变形，我正在使用封面。

          |
       |  |
    |  |  |
    |  |  |
    |  |  |  |
 |  |  |  |  |
 1  4  5  6  2

.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>来添加新元素）？

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类上设置高度，这样它将固定容器元素的高度并由于div是块元素而将宽度保持为100％。

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

这里是documentation

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

3 个答案: