如何倾斜 div 并保持背景图像不倾斜
How do you skew a div and keep the background image unskewed
我已经在这里工作了几个小时,所以希望有人能提供帮助。我有一个网站,其中大部分 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);
}
我该如何消除背景的倾斜?
好吧,那是个讨厌的人。在您在评论中链接到的页面上(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 足够高,它就可以工作。
一个 "cleaner" 解决方案是 clip-path: polygon()
,但不幸的是它仍然是实验性的,只有 Chrome 支持它,甚至只有前缀(我希望这可能有助于任何 reader 来自遥远的未来):
.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 都是倾斜的。大多数 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);
}
我该如何消除背景的倾斜?
好吧,那是个讨厌的人。在您在评论中链接到的页面上(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 足够高,它就可以工作。
一个 "cleaner" 解决方案是 clip-path: polygon()
,但不幸的是它仍然是实验性的,只有 Chrome 支持它,甚至只有前缀(我希望这可能有助于任何 reader 来自遥远的未来):
.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>