如何调整图像保持透明度不变的CSS或JS？ [英] How to dim an image keeping transparency untouched with CSS or JS?

问题描述

调暗图像的正常方法建议无处不在是更改它的不透明属性，并在其下显示一些黑暗。然而，我的图象有透明度并且在白色背景。所以我想保持背景下的透明部分的图像白色，只使更暗的像素有颜色。这是可能在CSS（最好）或JS吗？

编辑：示例图像

CSS

  img {
 width：250px; 
} 
 #one：hover {
 -webkit-filter：brightness（50％）; 
 -moz-filter：brightness（50％）; 
 filter：url（#brightness）; / * FF * / 
需要filter：亮度（50％）; 
} 
 #two：hover {
 -webkit-filter：contrast（50％）; 
 -moz-filter：contrast（50％）; 
 filter：url（#contrast）; 
 filter：contrast（50％）; 
} 
  

过滤器上的MDN

IE请参阅 CanIUse.com

FF支持（撰写本文时）需要定义SVG过滤器

亮度@ 50％ b
$ b

 < svg height =0xmlns =http://www.w3.org/2000/svg> 
 
< filter id =亮> 
< feComponentTransfer> 
< feFuncR type =linearslope =。5/> 
< feFuncG type =linearslope =。5/> 
< feFuncB type =linearslope =。5/> 
< / feComponentTransfer> 
< / filter> 
 
< / svg> 
  

对比@ 200％

 < svg height =0xmlns =http://www.w3.org/2000/svg> 
< filter id =contrast> 
< feComponentTransfer> 
< feFuncR type =linearslope =2intercept = - （0.5 * 2）+0.5/> 
< feFuncG type =linearslope =2intercept = - （0.5 * 2）+0.5/> 
< feFuncB type =linearslope =2intercept = - （0.5 * 2）+0.5/> 
< / feComponentTransfer> 
< / filter> 
< / svg> 
  

Normal approach to dimming an image suggested everywhere is to change it's opacity attribute and display something dark under it. However, my image has transparency and is on white background. So I want to keep the background under transparent parts of image white, only making darker the pixels that have color. Is this possible to do in CSS (preferably) or JS?

EDIT: Sample images http://imgur.com/a/Tat9f

Example image:

解决方案

There is a relatively new CSS property filter which might achieve what you are after.

The brightness option seems to be what you are after.

EDIT - Added interim support for FF via URL

JSFiddle Demo (with brightness and contrast options)

CSS

img {
width:250px;
}
#one:hover {
    -webkit-filter:brightness(50%);
    -moz-filter:brightness(50%);
    filter: url(#brightness); /* required for FF */
    filter:brightness(50%);
}
#two:hover {
    -webkit-filter:contrast(50%);    
    -moz-filter:contrast(50%);
     filter: url(#contrast);
    filter:contrast(50%);
}

MDN on Filter

Support is non-IE see CanIUse.com

FF support (at the time of writing) requires definition of an SVG filter

Brightness @ 50%

<svg height="0" xmlns="http://www.w3.org/2000/svg">

    <filter id="brightness">
        <feComponentTransfer>
            <feFuncR type="linear" slope=".5" />
            <feFuncG type="linear" slope=".5" />
            <feFuncB type="linear" slope=".5" />
        </feComponentTransfer>
    </filter>

</svg>

Contrast @ 200%

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="contrast">
        <feComponentTransfer>
            <feFuncR type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
            <feFuncG type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
            <feFuncB type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
        </feComponentTransfer>
    </filter>
</svg>

这篇关于如何调整图像保持透明度不变的CSS或JS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！