Ausgabe
Ich versuche, die gleiche Ansicht wie in Photoshop / Avocode mit CSS zu erreichen. Aber egal, wie ich die Hintergründe überlappe und welche Deckkraftstufen ich einstelle – ich kann nicht das gleiche Maß an Transparenz und Sättigung erreichen.
Ist das mit CSS möglich?
.parent {
height:300px;
width: 650px;
display:flex;
}
.child {
position:relative;
flex:1;
background-image: url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
background-position: center;
width:50%;
height:100%;
}
.child::after {
content:'';
position:absolute;
width: 100%;
height: 100%;
/*background-color: rgba(102, 207, 235,.7);*/
background-color: rgba(34,186,226, .7);
}
.child1 {
flex:1;
background-image: url(https://i.imgur.com/t2IIhj1.png);
background-position: center;
width:50%;
height:100%;
}<div class="parent">
<div class="child"></div>
<div class="child1"></div>
</div>Lösung
Das Hinzufügen von a mix-blend-modekann Ihnen wahrscheinlich helfen, näher zu kommen:
.parent {
height: 300px;
width: 650px;
display: flex;
}
.child {
position: relative;
flex: 1;
background-image: url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
background-position: center;
width: 50%;
height: 100%;
}
.child::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(34, 186, 226, .7);
mix-blend-mode: hard-light;
}
.child1 {
flex: 1;
background-image: url(https://i.imgur.com/t2IIhj1.png);
background-position: center;
width: 50%;
height: 100%;
}<div class="parent">
<div class="child"></div>
<div class="child1"></div>
</div>
Beantwortet von – Temani Afif
Antwort geprüft von – Mary Flores (FixError Volunteer)
