Filter von einem bestimmten Teil der Seite entfernen

Ich benutze einen Filter, um mein Hintergrundbild schwarz und weiß zu machen, und möchte es an einem bestimmten Teil der Seite (siehe Bild unten) mit Bootstrap entfernen. Wie geht das in CSS?Filter von einem bestimmten Teil der Seite entfernen

HTML:

<div class="section bg-cover"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="row"> 
         <div id="color" class="col-xs-8 col-xs-offset-2 col-md-8 col-md-offset-4 img-rounded"> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <!-- text here --> 
       </div> 
      </div> 
     </div> 
    </div>

CSS:

.bg-cover { 
     background: url('img/bg1.jpg') no-repeat center center; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     -webkit-filter: grayscale(100%); 
     filter: grayscale(100%); 
    } 

    #color { /* COLOR HERE !! */ 
     border: 3px solid; 
     height:60vh; 
    }

Ergebnis Bild (Die Farbe im Quadrat sein soll): https://puu.sh/pl8GC/2f7f15c0a8.jpg

Quelle

2016-06-08 Paul Lemarchand

Nein, das ist nicht möglich. 'filter' gilt für den Elternteil und alle Kinder. Es ist wie Opazität auf diese Weise. –

Ich sehe ... Gibt es eine Möglichkeit, einen ähnlichen Effekt ohne Filter zu machen? –

Nicht dass ich mir vorstellen kann. –

Nun, ich eine Lösung gefunden, so dass ich es hier posten : Ich musste den Hintergrund in ein div mit keine Kinder setzen, da die Filtereigenschaft auf alle Kinder seines div verbreitet wird, und dann Hintergrund-clip verwendet, um einen anderen Hintergrund auf dem Ri zu setzen Ort.

Quelle

2016-06-08 12:34:17

Filter von einem bestimmten Teil der Seite entfernen

Antwort

Verwandte Themen