CSS透明切片

收到一個網站的雙列布局設計。每一列都有一個透明背景，結合在一起形成頂部的弧形切口。CSS透明切片

我需要列與內容一起增長，但是當設置爲背景大小時會扭曲背景圖片：cover（爲了使用repeat-y而匹配的內容也不起作用）。有沒有一種很好的方法來實現這一點，或者一種絕對不會告訴他的方式？

.middle-left-container { 
    float: left; 
    min-height: 500px; 
    position: relative; 
    left: 0; 
    bottom: 0; 
    background-image: url('/tlm-wp/wp-content/uploads/2016/11/left-menu-background-sliced.png'); 
    background-repeat: no-repeat; 
    background-size: cover; 

    width: 20%; 
} 

body:not(.home) .middle-left-container { 
top: 0; 
background-image: url('/tlm-wp/wp-content/uploads/2016/11/left- menu-main.png'); 
} 


.middle-right-container { 
float: left; 
min-height: 500px; 
position: relative; 
top: 0; 
right: 0; 
bottom: 0; 
background-image: url('/tlm-wp/wp-content/uploads/2016/11/banner-bg.png'); 
background-repeat: no-repeat; 
background-size: 100% 100%; 
height: 100%; 
width: 80%; 
} 

body:not(.home) .middle-right-container { 
    background-image: none; 
    background-color: #fff; 
}

謝謝，馬特

來源

2016-11-08 Matthew Ediger

你可以使用邊界半徑，溢出和背景大小http://codepen.io/anon/pen/XNbGeV –

忘了說謝謝，這正是我一直在尋找，是試圖做..不知道border-radius的結束部分：xxxx/xem; ！ –

不要把在<body>彎曲BG圖像，把它放在一個固定寬度的容器中，然後錨定BG-圖像位置。

.container { 
    width:900px; 
    margin:0 auto; 
    background-position: top center; 
    ... 
}

然後在該容器內放置每個色譜柱容器。喜歡的東西：

<div class="container"> 
    <div class="sidebar-nav"> ... </div> 
    <div class="middle-left-container"> ... </div> 
    <div class="middle-right-container"> ... </div> 
</div>

來源

2016-11-08 17:02:02 inorganik

回答

相關問題