您如何倾斜div并保持背景图像不倾斜 [英] How do you skew a div and keep the background image unskewed

问题描述

我已经在这里待了几个小时，希望有人可以提供帮助.我有一个网站，其中大多数div都是不对称的.大多数div包含背景图片.现在，我使div倾斜，并且内容完美地位于其中，唯一的问题是背景图像，它与父级一起倾斜.我在Google上搜索了很多，却找不到很多，也许我使用的术语不正确.

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.

这是我有一个偏斜div的代码:

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

我该如何改变背景?

推荐答案

好，那真是令人讨厌.在您的评论中链接到的页面上(此处，以防万一您的评论被某天删除了)，他们实际上使用了带有白色背景的倾斜div来剪掉背景，就像这样:

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>

这确实是一个技巧，但是只要该div足够高，它就可以工作.

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

一个更清洁"的解决方案将是clip-path: polygon()，但不幸的是，它仍处于试验阶段，只有Chrome支持它，甚至只有前缀(我希望这可以帮助遥远的未来的任何读者):

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>

这篇关于您如何倾斜div并保持背景图像不倾斜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！