Text innerhalb div über schwarz Overlay OHNE Opazität

-1

Ich implementiere ein Onboarding ähnlich Medium, das Text in der Mitte der Box über eine schwarze Überlagerung mit dem Hintergrundbild dahinter hat.Text innerhalb div über schwarz Overlay OHNE Opazität

Aber ich bin zu kämpfen mit der Herstellung den Textes innerhalb des div mit dem Hintergrund-Bild Opazität Effekt nicht mit.

<div class="blackBackground"> 
    <div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);"> 
     <p class="text-inside-image">Fashion</p> 
    </div> 
</div>

Hier ist meine CSS:

.blackBackground { 
    background-color: black; 
    z-index: -1; 
} 

.opacityFilter { 
    opacity: 0.8; 
    position: relative; 

} 

.margin-bottom-negsix { 
    margin-bottom: -6px !important; 
} 


.topicImage { 
    padding-bottom: 75%; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-size: cover; 
    margin: 0 auto; 
    position: relative !important; 
    height:150px; 
    background-color: rgba(0, 0, 0, 0.8) !important; 

} 

.text-inside-image { 
    position: absolute; 
    top: 20%; 
    left: 35%; 
    color: white; 
    font-size: 24px; 
    font-weight: 500; 
    z-index: 1; 
}

ich mehrere Lösungen wie CSS - Opaque text on low opacity div? und How to keep text opacity 100 when its parent container is having opacity of 50

und ein paar mehr, aber kein Glück versucht haben.

Mein Fortschritt mit meinem JSFiddle ist hier: https://jsfiddle.net/RohitTigga/akz5zng7/1/

Warum ist dies geschieht und wie man es beheben?

Quelle

2016-07-11 Rohit Tigga

Ich habe versucht, die Deckkraft auf den Hintergrund und nicht auf das Element einzustellen; aber das ändert nicht einmal die Opazität ... warum? –

Warum wurde das abgelehnt? Erklären Sie sich. Ich verbrachte Zeit mit der Suche nach Lösungen, stellte so viel Kontext wie möglich zur Verfügung und stellte einen JSFiddle zur Verfügung. Was habe ich falsch gemacht???? –

Hallo Ihr HTML ändern wie diese

HTML

<div class="my-container"> 
    <h1 class="text-inside-image">Fashion</h1> 
    <img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3"> 
</div>

CSS

.my-container { 
    position: relative; 
    background: #5C97FF; 
    overflow: hidden; 
} 
.my-container h1 { 
    padding: 50px; 
    text-align: center; 
    z-index: 2; 
    position: relative; 
    color: #fff; 
} 
.my-container img { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: auto; 
    z-index: 1; 
    opacity: 0.6; 
}

Referenz https://plnkr.co/edit/YugyLd8H5mQExzF61rA9?p=preview

Quelle

2016-07-11 02:03:01

Sie hav e setzen einen transluzenten Hintergrund Farbe auf dem Element und dann verdeckte es mit einem Hintergrundbild.

Wenn das Hintergrundbild durchscheinend sein soll, verwenden Sie ein Bild, das an sich lichtdurchlässig ist. Das PNG-Bildformat unterstützt dies.

Quelle

2016-07-11 06:22:01 Quentin

Text innerhalb div über schwarz Overlay OHNE Opazität

Antwort

Verwandte Themen