Как вы искажаете 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);
}

Как бы я поступил, чтобы не перекосить фон?

user2596635 11.08.2015 источник

Ответы (1)

arrow_upward
3
arrow_downward

Хорошо, это противно. На странице, на которую вы ссылаетесь в своем комментарии (здесь, на случай, если ваш комментарий удалены однажды), они на самом деле используют перекошенный 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>

Это настоящий хак, но пока этот 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>

Siguza 11.08.2015

comment

Эй, спасибо! все еще смущен, хотя этот код искажает содержимое, так что это все еще не на 100% то, что мне нужно. Как бы вы исправили искажение контента? - user2596635; 11.08.2015

comment

Подождите, я думал, вы хотели сделать контент искаженным? Вы явно искажаете .navbar .container в своем примере, а затем выравниваете фон... хотите ли вы выравнивать фон и содержимое? - Siguza; 11.08.2015

comment

да, я просто пытаюсь исказить сам фактический div и все, что в нем, чтобы не было перекоса, с моей стороны, единственное, что было перекошено, это фон, я пытаюсь выглядеть примерно так - gt3themes.com/wordpress-themes/skew (кроме без карусели) - user2596635; 11.08.2015

comment

Спасибо! это будет работать с фоновым изображением? - user2596635; 11.08.2015

comment

Должен. Обновлено снова. - Siguza; 11.08.2015

Как вы искажаете div и сохраняете фоновое изображение неперекошенным

Ответы (1)

Похожие вопросы