你如何倾斜 div 并保持背景图像不倾斜

Question

我已经在这里工作了几个小时，希望有人可以提供帮助。我有一个网站，其中大部分 div 都是倾斜的。大多数 div 包含背景图像。现在我已经让 div 倾斜并且内容完美地位于其中，唯一的问题是背景图像，它与父级一起倾斜。我用谷歌搜索了很多，但找不到太多，也许我使用了错误的术语来寻找我正在寻找的东西。

这是我拥有的一个倾斜 div 的代码：

CSS：

.navbar .container:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: visible;
    width: 100%;
    height: auto!important;
    padding: 269px;
    top: -39px;
    background: url(/images/topbannerbg.jpg);
    z-index: -1;
    -webkit-transform: skewY(-3deg);
    -moz-transform: skewY(-3deg);
    -ms-transform: skewY(-3deg);
    -o-transform: skewY(-3deg);
    transform: skewY(-3deg);
}

HTML：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="header-inner"> 
      <div class="collapse navbar-collapse col-md-4" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
          <ul class="nav navbar-nav">
            <li><a href="">Discover Dartmouth</a></li>
            <li><a href="">At the Course</a></li>
            <li><a href="">In the News</a></li>
            <li><a href="">Get Involved</a></li>
            <li><a href="">Contact us</a></li>
          </ul>
        </ul>
      </div>

      <div class="navbar-header page-scroll col-md-4">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="/"><img src="/images/toplogo.png"></a> </div>

      <div class="col-md-4">
        <ul class="social navbar-right">
          <li><a href="#"><img src="/images/twitter.png"></a></li>
          <li><a href="#"><img src="/images/fb.png"></a></li>
          <li><a href="#"><img src="/images/googleplus.png"></a></li>
          <li><a href="#"><img src="/images/instagram.png"></a></li>
          <li><a href="#"><img src="/images/yt.png"></a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

当我搜索时，我偶然发现并尝试了这个，但它确实歪曲了所有内容，内容和背景图片

.navbar .container
{
    position: relative;
    overflow: hidden;
    -webkit-transform: skewY(-3deg);
    -moz-transform: skewY(-3deg);
    -ms-transform: skewY(-3deg);
    -o-transform: skewY(-3deg);
    transform: skewY(-3deg);
}

.navbar .container:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(/images/topbannerbg.jpg) 0 0 no-repeat;
    -webkit-transform: skewY(3deg);
    -moz-transform: skewY(3deg);
    -ms-transform: skewY(3deg);
    -o-transform: skewY(3deg);
    transform: skewY(3deg);
}

我将如何去调整背景？

Answer 1

好吧，这很糟糕。在您在评论中链接到的页面上（here，以防您的评论某天被删除），他们实际上使用带有白色背景的倾斜 div 来切断背景，如下所示：

.navbar .container
{
    position: relative;
    overflow: hidden;
}
.navbar .container::before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -2;
    background: url(http://lorempixel.com/g/1200/800/abstract);
}
.navbar .container::after
{
    content: "";
    position: absolute;
    width: 200%;
    height: 20%;
    top: 90%;
    left: -50%;
    z-index: -1;
    background: #FFF;
    -webkit-transform: skewY(-3deg);
    -moz-transform: skewY(-3deg);
    -ms-transform: skewY(-3deg);
    -o-transform: skewY(-3deg);
    transform: skewY(-3deg);
}

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="header-inner"> 
      <div class="collapse navbar-collapse col-md-4" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
          <ul class="nav navbar-nav">
            <li><a href="">Discover Dartmouth</a></li>
            <li><a href="">At the Course</a></li>
            <li><a href="">In the News</a></li>
            <li><a href="">Get Involved</a></li>
            <li><a href="">Contact us</a></li>
          </ul>
        </ul>
      </div>
      <div class="navbar-header page-scroll col-md-4">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="/"><img src="/images/toplogo.png"></a> </div>
      <div class="col-md-4">
        <ul class="social navbar-right">
          <li><a href="#"><img src="/images/twitter.png"></a></li>
          <li><a href="#"><img src="/images/fb.png"></a></li>
          <li><a href="#"><img src="/images/googleplus.png"></a></li>
          <li><a href="#"><img src="/images/instagram.png"></a></li>
          <li><a href="#"><img src="/images/yt.png"></a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

这是一个 hack，但只要那个 div 足够高，它就可以工作。

一个“更干净”的解决方案是clip-path: polygon()，但不幸的是它仍然是实验性的，只有 Chrome 支持它，甚至只有前缀支持（我希望这可能对遥远的未来的任何读者有所帮助）：

.navbar .container
{
    overflow: hidden;
    background: url(http://lorempixel.com/g/1200/800/abstract);
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 90%, 100% 0%);
}

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="header-inner"> 
      <div class="collapse navbar-collapse col-md-4" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
          <ul class="nav navbar-nav">
            <li><a href="">Discover Dartmouth</a></li>
            <li><a href="">At the Course</a></li>
            <li><a href="">In the News</a></li>
            <li><a href="">Get Involved</a></li>
            <li><a href="">Contact us</a></li>
          </ul>
        </ul>
      </div>
      <div class="navbar-header page-scroll col-md-4">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="/"><img src="/images/toplogo.png"></a> </div>
      <div class="col-md-4">
        <ul class="social navbar-right">
          <li><a href="#"><img src="/images/twitter.png"></a></li>
          <li><a href="#"><img src="/images/fb.png"></a></li>
          <li><a href="#"><img src="/images/googleplus.png"></a></li>
          <li><a href="#"><img src="/images/instagram.png"></a></li>
          <li><a href="#"><img src="/images/yt.png"></a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>