Opacity tylko dla backgroung-image, nie dla tekstu

Question

Witam,

mam szereg div'ów dla których tłem są zdjęcia. Mają one właściwość opacity:.6, jednak na tle owych zdjęć jest tekst, który chciałbym, aby właściwości przezroczystości już nie miał.

Czy jest na to jakaś sztuczka?

Dodam, że !important w dziecku w którym jest tekst nie działa

Answer 1

children; absolute;

parent: relative.

btw. Pokaż strukturę.

Comments

Niestety nie działa. Podaje kod

HTML:

<div class="frame_mini_oferta" style="background-image:url('img/obsltech.jpg');">
        <div class="frame_mini_oferta_text" >
              Obsługa techniczna sceny</br></br>
              Oferujemy bardzo szeroki wachlarz rozwiązań estradowych. </br>
              Obsłużymy kompleksowo imprezę w obrębie sceny i realizacji. </br>
              Oczywiście proponujemy obsługę wraz z pełnym zapleczem sprzętowym.
        </div>
 </div>

CSS:

.frame_mini_oferta
{
	display:inline-block;
	filter: brightness(0.25);
	transition-duration:1s;
	margin-bottom:-9px;
	font-size:10pt;
	line-height:1.3em;
	color:#fff;
	width:25%; 
	height:15%;
	background-repeat: no-repeat;
    background-size: 100%;
}

.frame_mini_oferta_text
{
	color:#fff;
}

 

Answer 2

Może coś takiego, jeżeli dobrze zrozumiałem:

<div style="height:100%;width:100%;background-image:url('obrazek.jpg');position:relative;top:0;left:0;z-index:1;opacity:.6"></div>
<div style="position:relative;left:0;top:0;z-index:9999">
      tekst
</div>

 

Answer 3

Nie da się ustawić opacity dla diva tak, by nie dotknęło to jego dzieci, czyli elementów wewnątrz.

Nie istnieje taka funkcja jak background-opacity.

Dlatego trzeba stworzyć oddzielne elementy, a przez position: absolute ustawić je tak, by na siebie nachodziły.

Oto przykład:

https://codepen.io/frostify/pen/BaNqqKW 

Ustawiłem kolor na red, żeby wyrażnie widać było, że opacity nie dotyka tekstu.