Anwenden von CSS-Filter auf nur die Hälfte des Bildes

Question

Ich habe eine überlagernde div auf meinem Bild mit filter: grayscale(100%); Füllung 50% der enthaltenen div aber der Filter wird nicht über mein Bild anwenden.

Aber wenn ich das Bild in meine filterBar div setzen, wird es nur das ganze Bild Graustufen machen. Ich brauche das Bild in Bezug auf die Bewertung der Nummerierung in Graustufen.

Ist das möglich?

Codepen

HTML

<div class="rating-wrapper-v2 bp-rating row"> 
    <div class="col-xs-6"> 
    <div class="filterBar"></div> 
    <img src="https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png" style="width: 100px;" alt="Baopals Rating" /> 
    </div> 
    <div class="col-xs-6"> 
    <p>BAOPALS SCORE</p> 
    <span>2.5</span> 
    <span>/</span> 
    <span>5</span> 
    </div> 
</div> 

CSS

.rating-wrapper-v2{ 
    width:300px; 
} 
.filterBar{ 
    filter: grayscale(100%); 
    position: absolute; 
    height: 50%; 
    width:100%; 
    bottom:0; 
    z-index:100; 
} 

Answer 1

Der Graustufen-Filter nur sein kann angewendet Tags img.
gibt mehrere Möglichkeiten, zu lösen sind, was Sie suchen, dann ist dies einer von ihnen:

.rating-wrapper-v2{ 
 
    width:300px; 
 
    height: 100px; 
 
} 
 
.img-container { 
 
    position: relative; 
 
} 
 
.img-container img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.img-container .filtered-container { 
 
    width: 100px; 
 
    height: 50px; 
 
    position: relative; 
 
    top: 50px; 
 
    overflow: hidden; 
 
} 
 
.img-container img.filtered { 
 
    top: -50px; 
 
    filter: grayscale(100%); 
 
    -webkit-filter: grayscale(100%); 
 
} 
 

 
.stars-container { 
 
    width: 500px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.st-bg { 
 
    position:absolute; 
 
    width: 500px; 
 
    height: 100px; 
 
    background: url(https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png) 0 0 repeat-x; 
 
    background-size: 100px 100px; 
 
    filter: grayscale(100%); 
 
    -webkit-filter: grayscale(100%); 
 
} 
 
.st { 
 
    position:absolute; 
 
    height: 100px; 
 
    background: url(https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png) 0 0 repeat-x; 
 
    background-size: 100px 100px; 
 
} 
 
.st-0-5 { 
 
    width: 50px; 
 
} 
 
.st-1 { 
 
    width: 100px; 
 
} 
 
.st-1-5 { 
 
    width: 150px; 
 
} 
 
.st-2 { 
 
    width: 200px; 
 
} 
 
.st-2-5 { 
 
    width: 250px; 
 
}

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 

 
<div class="rating-wrapper-v2 bp-rating row"> 
 
    <div class="col-xs-6"> 
 
    <div class="filterBar"></div> 
 
    <div class="img-container"> 
 
     <img src="https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png" style="width: 100px;" alt="Baopals Rating" /> 
 
     <div class="filtered-container"> 
 
     <img src="https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png" style="width: 100px;" alt="Baopals Rating" class="filtered"/> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
    <p>BAOPALS SCORE</p> 
 
    <span>2.5</span> 
 
    <span>/</span> 
 
    <span>5</span> 
 
    </div> 
 
</div>

aktualisieren

Dieses Beispiel zeigt, wie ein „1-5 Sterne erzeugt Bewertung wie "mit grauem Hintergrundeffekt:

Hinweis - das CSS dort ist nicht komplett, aber ich denke, die gener al Idee ist gut genug, und man kann es ohne mich ab :)

.stars-container { 
 
    width: 500px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.st-bg { 
 
    position:absolute; 
 
    width: 500px; 
 
    height: 100px; 
 
    background: url(https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png) 0 0 repeat-x; 
 
    background-size: 100px 100px; 
 
    filter: grayscale(100%); 
 
    -webkit-filter: grayscale(100%); 
 
} 
 
.st { 
 
    position:absolute; 
 
    height: 100px; 
 
    background: url(https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png) 0 0 repeat-x; 
 
    background-size: 100px 100px; 
 
} 
 
.stars-container.st-0-5 .st{ 
 
    width: 50px; 
 
} 
 
.stars-container.st-1 .st{ 
 
    width: 100px; 
 
} 
 
.stars-container.st-1-5 .st{ 
 
    width: 150px; 
 
} 
 
.stars-container.st-2 .st{ 
 
    width: 200px; 
 
} 
 
.stars-container.st-2-5 .st{ 
 
    width: 250px; 
 
}

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 

 
<div class="stars-container container"> 
 
    <div class="st-bg row"></div> 
 
    <div class="st row"></div> 
 
</div> 
 
<div class="stars-container st-0-5 container"> 
 
    <div class="st-bg row"></div> 
 
    <div class="st row"></div> 
 
</div> 
 
<div class="stars-container st-1-5 container"> 
 
    <div class="st-bg row"></div> 
 
    <div class="st row"></div> 
 
</div> 
 
<div class="stars-container st-2 container"> 
 
    <div class="st-bg row"></div> 
 
    <div class="st row"></div> 
 
</div> 
 
<div class="stars-container st-2-5 container"> 
 
    <div class="st-bg row"></div> 
 
    <div class="st row"></div> 
 
</div>