背景图像整形

-1

我想使非矩形背景的网站。这里是它应该是什么样子的图像：https://scontent-frt3-1.xx.fbcdn.net/v/t34.0-12/13046124_10208507344992928_1508021114_n.jpg?oh=4da1595b35d18dd641146a5ff5f39ff9&oe=57206A50 背景图像整形

我已经尝试了很多来自web的建议，但没有为我工作。任何人都可以帮助我吗？谢谢！

来源

2016-04-25 H Sturma

是什么问题。 ..这是你面临的问题的截图？ –

这个问题要么过于宽泛，要么基于观点，要么需要讨论，所以是堆栈溢出的主题。如果您有特定的，可回答的编程问题，请提供完整的详细信息。 –

您可以使用transform:skewY来创建这样的设计。一个快速演示可以看到下面，其中background财产已被使用以及一些巧妙的利用background-position为“两半”的形象定位在一起：

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>

来源

2016-04-25 10:42:14 jbutler483

不错！所以我不得不编辑背景位置来将这两个图像放在一起？没有白线... 但有一个问题 - 我已经找到了'skew'，但是在第一张和最后一张图片中，我需要设置图片的顶部而没有这种转换。我必须连接偏斜变换。与第二个，因为你有两个图像那里，他们必须连接。您可以在我包含的图片上看到它。我不知道如何解决这个问题谢谢！ –

@HSturma您可能可以使用'透视变换'，但需要一些摆动才能使其成为全屏宽度。祝你好运！ – jbutler483

背景图像整形

回答

相关问题