用CSS格式化图像的一部分 [英] Gray out a section of an image with CSS

问题描述

我正在尝试将图像的一部分变成灰色（左右两个条纹）。有没有办法做到这一点只使用CSS？

我知道我可以使用过滤器（即 filter：greyscale（100％）），但我不希望整个图像是灰色的。

解决方案

标记

JSFIDDLE DEMO

$ b

HTML

 < div class =image -container> 
< img class =image-greysrc =http://placekitten.com/200/150/> 
< / div> 
  

CSS

  .image-container {
 position：relative; 
 display：inline-block; 
} 
 
 .image-grey {
 display：block; 
 -webkit-filter：灰度（100％）; 
} 
 
 .image-container：after {
 position：absolute; 
内容：; 
 top：0; 
剩下：50％; 
宽度：50％; 
身高：100％; 
 background-image：url（http://placekitten.com/200/150）; 
 background-position：右上角; 
} 
  

I'm trying to grey out a section of an image (two stripes at left and right). Is there a way to do this using just CSS?

I know I can use filters (i.e. filter: grayscale(100%)), but I don't want the entire image to be grey.

解决方案

Pure CSS Solution with no extra markup

JSFIDDLE DEMO

HTML

<div class="image-container">
    <img class="image-grey" src="http://placekitten.com/200/150" />
</div>

CSS

.image-container {
    position:relative;
    display:inline-block;
}

.image-grey {
    display:block;
    -webkit-filter: grayscale(100%);
}

.image-container:after {
    position:absolute;
    content:"";
    top:0;
    left:50%;
        width:50%;
    height:100%;
    background-image:url(http://placekitten.com/200/150);
    background-position:top right;
}

这篇关于用CSS格式化图像的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！