Farbverlauf Mehrere Bilder zusammenfügen

Question

Wie können mehrere Farbverlaufsverläufe in bestimmten Bereichen wie im angehängten Bild unten mithilfe von CSS miteinander kombiniert werden?

Was ich habe versucht:

.container { 
 
    position: relative; 
 
    display: flex; 
 
    height: 200px; 
 
} 
 

 
.container:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 80px; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 50%; 
 
    margin-right: -40px; 
 
    background: url(https://www.w3schools.com/w3css/img_fjords.jpg); 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(5px); 
 
} 
 

 
.container > div { 
 
    flex: 1; 
 
    background-size: 100% 100%; 
 
}

<div class="container"> 
 
    <div style="backgroud-image:url(https://www.w3schools.com/w3css/img_fjords.jpg)"></div> 
 
    <div style="background-image:url(https://www.w3schools.com/w3css/img_fjords.jpg)"></div> 
 
</div>

Allerdings gibt es kein Fading/Übergang zu den Hintergrundbildern zu respektieren, wie in Bild unten gezeigt:

UPDATE

Ich habe keine solide Antwort für meine Frage erhalten, aber dieser Code scheint die nächste Antwort zu sein, die ich bis heute bekommen kann.

Eine Modifikation von PEN BY Peter Ramsing

<div class="hero-image"> 
    <img src="http://static.peter.coffee/codepen-assets/keyboard-background.jpg" /> 
</div> 
<div class="hero-before"> 
    <img src="http://static.peter.coffee/codepen-assets/keyboard-background.jpg" /> 
</div> 

<style> 
img { 
    /* To contain the image to the confines of the div */ 
    max-width: 100%; 
} 

.hero-image { 
    max-width: 100%; 
    width: 800px; 
    margin: auto; 
} 
.hero-before { 
    max-width: 100%; 
    width: 800px; 
    margin: auto; 
} 

.hero-image::after { 
    display: block; 
    position: relative; 
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%); 
    margin-top: -50px; 
    height: 40px; 
    width: 100%; 
    content: ''; 
} 
.hero-before::after { 
    display: block; 
    position: relative; 
    background-image: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%); 
    margin-top: -345px; 
    height: 50px; 
    width: 100%; 
    content: ''; 
} 
</style> 

Answer 1

können Sie einige Pseudo-Element verwenden, die Sie zwischen den beiden Bildern setzen und auf sie linearen Gradienten anzuwenden. Indem Sie die gleichen Farben verwenden, erzeugen Sie dieses Effekt. Sie können feststellen, dass die Lösung funktioniert, indem Sie Hintergrundfarbe und Hintergrundbild verwenden, müssen Sie einfach die im Hintergrund verwendete Farbe respektieren und sie auf das Pseudoelement anwenden. Hier

ist ein Beispiel, können Sie die Breite des Pseudo-Elements anpassen je nach Bedarf:

.container { 
 
    position: relative; 
 
    display: flex; 
 
    min-height: 100px; 
 
    margin-bottom:20px; 
 
} 
 

 
.container:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 80px; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 50%; 
 
    margin-right: -40px; 
 
    background: linear-gradient(to right, #c3986b, #0a4b67); 
 
} 
 

 
.container>div { 
 
    flex: 1; 
 
    background-size:100% 100%; 
 
}

<div class="container"> 
 
    <div style="background:#c3986b;"></div> 
 
    <div style="background:#0a4b67;"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div style="background-image:url(https://dummyimage.com/150x100/c3986b/14151a)"></div> 
 
    <div style="background-image:url(https://dummyimage.com/150x100/0a4b67/14151a)"></div> 
 
</div>

Answer 2

Sie background: linear-gradient() mit dem Flexbox so etwas wie dies kombinieren zu erreichen :

div { 
 
    display: flex; /* displays children inline */ 
 
    justify-content: space-around; /* horizontal alignment/icons are evenly distributed with equal space around them, i.e. all have equal space on both sides, thats why there are two units of space between them/you can also experiment with other values such as: space-between, space-evenly, center ... */ 
 
    align-items: center; /* vertical alignment/centering of the icons */ 
 
    height: 100px; 
 
    background: linear-gradient(to right, #c3986b 45%, #0a4b67 55%); /* adjust % to your needs, the sum of both needs to evaluate to 100% */ 
 
} 
 

 
img { 
 
    border-radius: 50%; 
 
}

<div> 
 
    <img src="http://lorempixel.com/50/50/" alt="icon1"> 
 
    <img src="http://lorempixel.com/50/50/" alt="icon2"> 
 
</div>

In dem angegebenen Beispiel habe ich den linearen Gradienten zu 10% der Elternbreite gemacht. Diese Zahl wird berechnet durch Subtraktion beider Werte in%, 55% - 45%.

Um seine Breite zu erhöhen, wenn es gewünscht wird, einfach die größere Zahl erhöhen und die untere verringern, vorzugsweise um die gleiche Menge%, z.B. 40% & 60%, um es horizontal zentriert zu lassen. Um die Breite zu verringern, tun Sie einfach das Gegenteil.