이미지의 절반에만 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는 완벽하지는 않지만 나는 gener 알 아이디어는 충분 당신은 나없이 그것을 완료 할 수 있습니다 :)

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