使用CSS使图像变暗(任何形状)

Question

所以我已经看到了很多用CSS来改变图像的方法,包括带圆角的图像,但我的问题不同了.

假设我有一个看起来像小狗的.png图像(只是用它,我没有任何好的例子),当我把它放在我的页面上时,我给它的尺寸为100 x 100.

但是我不能只在它上面覆盖一些东西,或者整个图像着色,因为它会使狗的背景也被染色,看起来很难看.

是否可以使用CSS为任意形状的图像着色？

(我假设你理解我的观点,没有必要使用无用的代码)

谢谢!

Answer 1

容易

img {
  filter: brightness(50%);
}

Answer 2

您可以随时更改图像的不透明度,考虑到任何替代方案的难度,这可能是最佳方法.

CSS:

.tinted { opacity: 0.8; }

如果您对更好的浏览器兼容性感兴趣,我建议您阅读:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

如果你足够坚定,你可以让它早在IE7上工作(谁知道!)

注意:正如JGonzalezD在下面指出的那样,如果背景颜色通常比图像本身更暗,这实际上只会使图像变暗.虽然如果您不想特别想要使图像变暗,但是想要在悬停/聚焦/其他状态下突出显示它,这种技术可能仍然有用.

Answer 3

如果你只想background-image影响 ，你可以使用线性渐变来做到这一点，就像这样：

  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(IMAGE_URL);

如果你想让它更暗，把 alpha 值调高，否则你想让它更亮，把 alpha 调低