Question

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

这是我有一个偏斜的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来切断背景，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

这是一个非常黑客，但只要div足够高，它就可以工作。

A＆＃34;清洁工＆＃34;解决方案是clip-path: polygon()，但不幸的是它仍然是实验性的，只有Chrome支持它，甚至只有前缀（我希望这可能会帮助远期的任何读者）：

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

你如何扭曲div并保持背景图像不受影响

1 个答案: