背景图像整形

Question

我正在尝试制作具有非矩形背景的网站。这是图像的外观：https://scontent-frt3-1.xx.fbcdn.net/v/t34.0-12/13046124_10208507344992928_1508021114_n.jpg?oh=4da1595b35d18dd641146a5ff5f39ff9&oe=57206A50

我尝试了很多来自网络的建议，但没有一个对我有用。有人可以帮我吗？谢谢！

Answer 1

您可以使用 transform:skewY 来创建这样的设计。下面是一个快速演示，其中使用了 background 属性以及巧妙地使用 background-position 将图像的 "two halves" 定位在一起：

div{
  width:100%;
  height:300px;
  position:relative;
  margin-top:50px;
  }
.part1:before,.part1:after{
    content:"";
  position:absolute;
  background:url("http://www.godhungry.org/wp-content/uploads/2015/08/6794440-free-street-wallpaper.jpg");
  background-size:200% 100%;
  background-position:0 0;
  height:100%;
  width:50%;top:0;left:0;
  transform:skewY(5deg);
  transform-origin:top left;
  }
.part1:after{
  left:50%;
  transform:skewY(-5deg);
  transform-origin:top right;
  background-position:-100% 0;
  }
.part2{
  background:url("http://www.godhungry.org/wp-content/uploads/2015/08/6794440-free-street-wallpaper.jpg");
  background-size:100% 100%;
  transform: perspective(2000px) rotateY(-30deg);
transform-origin:top right;
  }

<div class="part1"></div>

<div class="part2"></div>

背景图像整形

Background image shaping

css

css-shapes