testo su immagine di background filtrata

[merovese]

Ciao a tutti ho inserito in un div una immagine filtrata, nel codice troverete due filtri, stavo facendo delle prove perché ero indeciso, comunque sopra a questa immagine di backuground vorrei inserire un testo, e fin qui tutto ok, ma la domanda è perché anche il testo prendo il filtro del background?

  }         .banner {
            height: 400px;
            background-image: url(immagini/immagini/1.jpg);
			background-size: cover;
  			background-repeat: no-repeat;
			-webkit-filter: blur(0px);
			-moz-filter: blur(0px);
			-o-filter: blur(0px);
			-ms-filter: blur(0px);
			filter: blur(0px);
			-webkit-filter: opacity(50%);
			-moz-filter: opacity(50%);
			-o-filter: opacity(50%);
			-ms-filter: opacity(50%);
			filter: opacity(50%) blur(2px);
         }

<div class="banner">
			 <span style="color: #eee; font-size: 30px;">#trasportiamo il tuo mondo</span>
		  </div>

[merovese]

ho fatto una modifica al codice per separare il testo dal banner

         .banner {
            height: 400px;
            background-image: url(immagini/immagini/1.jpg);
            background-size: cover;
              background-repeat: no-repeat;
            -webkit-filter: blur(0px);
            -moz-filter: blur(0px);
            -o-filter: blur(0px);
            -ms-filter: blur(0px);
            filter: blur(0px);
            -webkit-filter: opacity(50%);
            -moz-filter: opacity(50%);
            -o-filter: opacity(50%);
            -ms-filter: opacity(50%);
            filter: opacity(50%) blur(2px);
             }
          banner .text {
              margin-top: 100px;
              
          }

<div class="banner">
             <div class="text">
             <span style="color: #000; font-family: Lucida Handwriting, Cursive; font-size: 30px;">#trasportiamo il tuo mondo</span>
          </div>
      </div>

ma anche questo non ha nessun effetto ne sulla posizione del test ne sul filtro applicato principalmente al banner, io dovrei avere un testo pulito senza filtri e posizionato in maniera diversa

[ninja72]

Potresti utilizzare lo pseudo elemento ::before sulla classe banner in modo che l'effetto venga replicato solo sullo pseudo elemento e non su tutti i child del parent.
In questo caso potresti eliminare del tutto la classe .banner e inserire lo pseudo elemento in questo modo:

.banner::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 400px;
            background-image: url(immagini/immagini/1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            filter: opacity(50%) blur(2px);
        }

Inoltre ti potrei consigliare di eliminare i prefissi visto che nel caso andrebbero a coprire solo un eventuale 1% di casistica scoperta da browser datati.

[merovese]

Potresti utilizzare lo pseudo elemento ::before sulla classe banner in modo che l'effetto venga replicato solo sullo pseudo elemento e non su tutti i child del parent.
In questo caso potresti eliminare del tutto la classe .banner e inserire lo pseudo elemento in questo modo:

.banner::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 400px;
            background-image: url(immagini/immagini/1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            filter: opacity(50%) blur(2px);
        }

Inoltre ti potrei consigliare di eliminare i prefissi visto che nel caso andrebbero a coprire solo un eventuale 1% di casistica scoperta da browser datati.

ti ringrazio ma in questo modo tutti i contenuti si spostano sopra l'immagine, come se il div banner fosse diventato il background di tutto i sito, e non solo del testo che effettivamente deve esserci