How do you skew a div and keep the background image unskewed

问题

I've been at this for hours so hopefully someone can help. I have a website where a large majority of the divs are skewed. Most of the divs contain background images. Right now I've got the div skewed and the content sitting in it perfectly, the only issue is the background image, it's skewing along with the parent. I googled quite a bit and haven't been able to find much, maybe I'm using the wrong terminology for what I'm looking for.

Here is code for one of the skewed divs I have:

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>

When I was searching I came across and tried this, but it really skewed everything, the content and the background image

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

How would I go about unskewing the background?

回答1:

Ok, that's a nasty one. On the page you linked to in your comment (here, just in case your comment gets deleted some day), they actually use a skewed div with a white background to cut the background off, like so:

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

This is quite a hack, but as long as that div is tall enough, it works.

A "cleaner" solution would be clip-path: polygon(), but unfortunately it's still experimental, only Chrome supports it, and even that only with prefix (I hope this might help any reader from the distant future though):

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

来源：https://stackoverflow.com/questions/31947156/how-do-you-skew-a-div-and-keep-the-background-image-unskewed

标签

html

css3

background-image

skew