将CSS滤镜仅应用于图像的一半

Question

将CSS滤镜仅应用于图像的一半

htmlcss

4

我有一个覆盖在图像上的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;
}

- NooBskie

筛选器只能应用于图像，而不仅仅是 div。 - Bhojendra Rauniyar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dekel · Accepted Answer

灰度过滤器仅适用于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>