仅在图像的一半上应用CSS过滤器

Question

我的图片上覆盖了div，filter: grayscale(100%);填充了包含div的50%，但过滤器不适用于我的图片。

但是，如果我将图像放在filterBar div中，它只会使整个图像变灰。我需要将图像与数字等级进行灰度化。

这可能吗？

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

灰度滤镜只能应用于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>