只对一半的图像应用CSS滤镜

灰度过滤器只能应用于img标签。
有几种方法可以解决您正在寻找的问题，这是其中之一:

.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>

这个例子演示了如何生成一个带有灰色背景效果的"1-5星级评级":

注意- CSS有不完整，但我认为总的想法是足够好的，你可以完成它没有我:)

.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>