Question

我在我的网站上使用WrapBootStrap主题，并希望裁剪此处显示的背景图片：

www.getpowerhelp.com

基本上，我想从底部裁剪它。

如何使用CSS执行此操作？相关代码在这里：

HTML文件

<div class="hero hero_agency">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">

      <!-- Hero heading -->
      <h1 class="heading hero__heading">Get Your Money Back from NPower</h1>

CSS文件

    .hero {
  position: relative;
  padding: 70px 0 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(top, rgba(108, 91, 123, 0.8) 0%, rgba(53, 92, 125, 0.8) 70%);
  background-image: -o-linear-gradient(top, rgba(108, 91, 123, 0.8) 0%, rgba(53, 92, 125, 0.8) 70%);
  background-image: linear-gradient(to bottom, rgba(108, 91, 123, 0.8) 0%, rgba(53, 92, 125, 0.8) 70%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc6c5b7b', endColorstr='#cc355c7d', GradientType=0);
  content: "";
}

@media (min-width: 768px) {
  .hero {
    padding: 220px 0 150px;
  }
}

.hero_agency {
  background-image: url(../img/bg_1.jpg);
  text-align: center;

}

Answer 1

尝试使用background-position: center center;课程样式上的background-position: center bottom;替换.hero，如果那是“你从底部裁剪”的意思

对于底部的300px，您可以这样设置：background-position: center -300px;

Answer 2

我想到了两种裁剪方式和形象：

使用图像到设置为overflow: hidden的固定高度容器内部，而另一种方法是将图像设置为背景并使用background-size属性和background-position属性为了达到同样的效果。

容器内的图像方式

http://codepen.io/nicholasabrams/pen/QbQXLN

CSS方式单个元素

http://codepen.io/nicholasabrams/pen/eNVwOE

如何裁剪背景图片？

2 个答案: