Question

使用CSS我在Div上设置了一个背景图像，如下图所示。

我的问题是我需要将图像作为parnet Div的全宽，并使图像高度为其自然的全高，但我需要裁剪/遮盖图像的高度，以便它只能在155px左右可见。因此，即使图像的高度为300像素，也只会显示155像素。

这可能是CSS还是我需要调整实际图像文件的大小？

<section class="recent-projects-section">
  <h1 class="recent-projects-section-heading">Recent Projects</h1>
  <p class="recent-projects-section-body">View our portfolio of some recent projects we have worked on for inspiration and to see our capabilities.</p>

  <div class="recent-projects-container">
    <div class="recent-project zpanel" style="background-image: url(http://apollowebstudio.dev/wp-content/uploads/2014/05/zpanel-Dashboard-300x206.png);">
      <h1 class="recent-projects-heading">Los Angeles</h1>
      <p class="recent-projects-body">Being at the corner of technology and entertainment keeps SitePoint relevant and cutting edge.</p>
    </div>
    <div class="recent-project fastnfurriest" style="background-image: url(http://apollowebstudio.dev/wp-content/uploads/2014/07/fastnfurriest-com-300x486.png);">
      <h1 class="recent-projects-heading">San Francisco</h1>
      <p class="recent-projects-body">The Hub of Technology and the home of our current and future partners enables us to stay on top of information and innovation.</p>
    </div>
    <div class="recent-project project-man-gantt" style="background-image: url(http://apollowebstudio.dev/wp-content/uploads/2015/03/project-management-module-gantt-300x201.png);">
      <h1 class="recent-projects-heading">Melbourne</h1>
      <p class="recent-projects-body">Melbourne's growing tech community is where our seasoned developers and designers create the SitePoint magic.</p>
    </div>
  </div>
</section>

CSS

  section.recent-projects-section {
    min-height: 770px;
    /* background: url(http://apollowebstudio.dev/assets/img/world-map-blue.png) left top no-repeat; */    
    background: url(http://apollowebstudio.dev/assets/img/world-map-trans.png) left top no-repeat #3BB2D0;
    background-size: cover;
  }

  section.recent-projects-section {
    position: relative;
    display: block;
    text-align: center;
    width: 100%;
    padding: 0;
    color: #424242;
    margin-top: -1.3em;
  }

  .recent-projects-section-heading {
    color: #fff;
    padding-top: 2.5em;
  }

  @media only screen and (min-width: 820px) {
    section.recent-projects-section>h1 {
      width: 60%;
    }
  }

  section.recent-projects-section h1 {
    font-size: 1.82em;
    font-style: normal;
    font-weight: 700;
    line-height: 1.16em;
    padding-top: 2.5em;
    margin-left: auto;
    margin-right: auto;
    font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
  }

  section.recent-projects-section p {
    text-align: center;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.3em;
    color: #777;
    font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
  }

  section p.recent-projects-section-body {
    color: #fff;
    width: 50%;
    font-size: 1.4em;
    margin: 0 auto;
  }

  .recent-projects-container {
    width: 75%;
    margin: 0 auto;
    padding-top: 4.1em;
    padding-bottom: 2em;
  }

  .recent-project {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 250px;
    min-height: 400px;
    border-radius: 10px;
    background: #fff left top no-repeat;
    padding: 2em 0 0;
    margin-top: 2em;
  }

  section.recent-projects-section h1.recent-projects-heading {
    text-align: left;
    font-size: 2em;
    font-weight: 400;
    padding: 5em 0 0 .8em;
    line-height: 1.16em;
  }

  .recent-projects-body {
    text-align: left;
    font-size: 1.2em;
    font-weight: 400;
    width: 80%;
    margin: 0 auto;
  }

  @media only screen and (min-width: 1045px) {
    .recent-project {
      width: 300px;
    }
  }

  @media only screen and (min-width: 621px) {
    .recent-project+.recent-project {
      margin-left: 1em;
    }
  }

  @media only screen and (min-width: 820px) {
    .recent-project+.recent-project {
      margin-left: 2em;
    }
  }

  @media only screen and (min-width: 1045px) {
    .recent-project {
      width: 300px;
    }
  }

Answer 1

您可以使用从透明（锐利或模糊）到背景颜色的渐变来隐藏/裁剪图像的一部分。

裁剪设置为185px 的示例（我让你重置为155px，以确保你理解它是如何工作的;））或模糊165px到205px。

＆＃13;

/* set your background here for demo and readability */

.zpanel {
  background-image:linear-gradient( to bottom , transparent 185px, white 185px), url(http://lorempixel.com/400/200/city/3);
}

/* add even blurr on cropping ? */
.fastnfurriest {
  background-image: linear-gradient( to bottom , transparent 165px, white 205px), url(http://lorempixel.com/400/300/city/4);
}
.project-man-gantt {
  background-image: linear-gradient( to bottom , transparent 185px, white 185px),  url(http://lorempixel.com/400/200/city/5)
}
/* end demo multiple bg */


section.recent-projects-section {
    min-height: 770px;
    /* background: url(http://apollowebstudio.dev/assets/img/world-map-blue.png) left top no-repeat; */    
    background: url(http://apollowebstudio.dev/assets/img/world-map-trans.png) left top no-repeat #3BB2D0;
    background-size: cover;
  }
  
  section.recent-projects-section {
    position: relative;
    display: block;
    text-align: center;
    width: 100%;
    padding: 0;
    color: #424242;
    margin-top: -1.3em;
  }
  
  .recent-projects-section-heading {
    color: #fff;
    padding-top: 2.5em;
  }
  
  @media only screen and (min-width: 820px) {
    section.recent-projects-section>h1 {
      width: 60%;
    }
  }
  
  section.recent-projects-section h1 {
    font-size: 1.82em;
    font-style: normal;
    font-weight: 700;
    line-height: 1.16em;
    padding-top: 2.5em;
    margin-left: auto;
    margin-right: auto;
    font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
  }
  
  section.recent-projects-section p {
    text-align: center;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.3em;
    color: #777;
    font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
  }
  
  section p.recent-projects-section-body {
    color: #fff;
    width: 50%;
    font-size: 1.4em;
    margin: 0 auto;
  }
  
  .recent-projects-container {
    width: 75%;
    margin: 0 auto;
    padding-top: 4.1em;
    padding-bottom: 2em;
  }
  
  .recent-project {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 250px;
    min-height: 400px;
    border-radius: 10px;
    padding: 2em 0 0;
    margin-top: 2em;
  }
  
  section.recent-projects-section h1.recent-projects-heading {
    text-align: left;
    font-size: 2em;
    font-weight: 400;
    padding: 5em 0 0 .8em;
    line-height: 1.16em;
  }
  

  .recent-projects-body {
    text-align: left;
    font-size: 1.2em;
    font-weight: 400;
    width: 80%;
    margin: 0 auto;
  }
  
  @media only screen and (min-width: 1045px) {
    .recent-project {
      width: 300px;
    }
  }
  
  @media only screen and (min-width: 621px) {
    .recent-project+.recent-project {
      margin-left: 1em;
    }
  }
  
  @media only screen and (min-width: 820px) {
    .recent-project+.recent-project {
      margin-left: 2em;
    }
  }
  
  @media only screen and (min-width: 1045px) {
    .recent-project {
      width: 300px;
    }
  }

＆＃13;

<section class="recent-projects-section">
  <h1 class="recent-projects-section-heading">Recent Projects</h1>
  <p class="recent-projects-section-body">View our portfolio of some recent projects we have worked on for inspiration and to see our capabilities.</p>

  <div class="recent-projects-container">
    <div class="recent-project zpanel" >
      <h1 class="recent-projects-heading ">Los Angeles</h1>
      <p class="recent-projects-body ">Being at the corner of technology and entertainment keeps SitePoint relevant and cutting edge.</p>
    </div>
    <div class="recent-project fastnfurriest " >
      <h1 class="recent-projects-heading ">San Francisco</h1>
      <p class="recent-projects-body ">The Hub of Technology and the home of our current and future partners enables us to stay on top of information and innovation.</p>
    </div>
    <div class="recent-project project-man-gantt " >
      <h1 class="recent-projects-heading ">Melbourne</h1>
      <p class="recent-projects-body ">Melbourne's growing tech community is where our seasoned developers and designers create the SitePoint magic.</p>
    </div>
  </div>
</section>

＆＃13;

免责声明：城市名称和城市图片可能不匹配，仅供展示！：）

Answer 2

添加section .recent-projects-section { background-size: 100% }代替background-size: cover

使用CSS混合或裁剪图像，以便仅在背景图像上显示设置的高度

2 个答案: