背景圖像整形

-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

背景圖像整形

回答

相關問題