CSS transparenter Ausschnitt

Erhalten ein zweispaltiges Layout-Design für eine Website. Jede Spalte hat einen transparenten Hintergrund, der zusammen einen geschwungenen Ausschnitt an der Oberseite bildet.CSS transparenter Ausschnitt

Ich brauche die Spalten, um mit Inhalt zu wachsen, jedoch verzerrt dies das Hintergrundbild, wenn auf Hintergrundgröße eingestellt: cover (Passende Dinge, um Wiederholungs-y zu verwenden wird auch nicht funktionieren). Gibt es einen guten Weg, dies zu erreichen, oder eine Möglichkeit, es ihm absolut nicht zu sagen?

.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; 
}

Danke, Matt

Quelle

2016-11-08 Matthew Ediger

Sie border-radius verwenden, Überlauf und Hintergrund-Größe http://codepen.io/anon/pen/XNbGeV –

vergessen, Dank zu sagen, das ist genau das, was ich suchte und war versuchen zu tun .. Wusste nicht den Endteil von border-Radius: xxxx/xem; ! –

nicht die gekrümmte bg Bild auf dem <body> setzen Sie, legte es auf eine feste Breite Behälter, dann die Position bg-Bild verankern.

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

In diesen Container legen Sie dann jeden Ihrer Container. Etwas wie:

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

Quelle

2016-11-08 17:02:02 inorganik

CSS transparenter Ausschnitt

Antwort

Verwandte Themen