Question

有人可以帮助我拥有这种带有前景图像颜色的透明背景。我应该使用透明图像的多个滤镜，或者如何实现这一点，我可以获得#AARRGGBB值的透明度，但不能获得如下图所示的纹理。

我正在使用相同的前景图像和相同的背景图像现在我想在这两者之间引入滤镜，这样只有图像的颜色可见而不是图像本身。我想知道我应该在这两个图像之间使用透明滤镜的值（ARGB）来实现这一目标，还是有任何其他方法。

Answer 1

也许，您正在寻找Palette。

这是一个从图像中提取突出颜色的辅助类。一个   从图像中提取具有不同轮廓的颜色数量：


活力

充满活力的黑暗

充满活力的光明

静音

Muted Dark

柔和的光线

在这里，您如何使用它。

 // Synchronous
 Palette p = Palette.from(bitmap).generate();

 // Asynchronous
 Palette.from(bitmap).generate(new PaletteAsyncListener() {
     public void onGenerated(Palette p) {
         // Use generated instance
     }
 });

要重现颜色，

p.getVibrantColor(int defaultColor)  //return int of RGB

但是，Pallete只返回一个颜色，而不是问号图像中显示的渐变。对我来说，它们似乎已经模糊并为前景图像增加了透明度，然后将其张贴在后台。

Answer 2

这是一个简单的解决方案，可以实现您正在寻找的只需使用CSS无需插件

＆＃13;

.wrapper {
  position: relative;
  width: 300px;
  height: 400px;
  text-align:right;
}
.wrapper div {
  background-image: url("http://www.placecage.com/c/200/300");
  background-repeat: no-repeat;
  background-size: 100%;
}
.blur {
  -webkit-filter: blur(12px);
  -ms-filter: blur(12px);
  filter: blur(12px);
  width: 100%;
  height: 100%;
  z-index: -10; /* place below other items*/
}
.focus {
  z-index: 999;/* make sure to place at a high z-index so it shows up on top*/
  border: 1px solid white;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
}

＆＃13;

<div class="wrapper">
  <div class="blur"></div>
  <div class="focus"></div>
  <a href="https://www.placecage.com/">Place Cage </a>
</div>

＆＃13;

Answer 3

事实证明，在使用像Blurry或Picasso transformations这样的库这两个库中，很少有简单的选项可以通过名为wasabeef的开发人员来实现。我使用了毕加索变换，因为如果你已经在你的项目中使用它，它会与毕加索图像库无缝集成。我所做的只是提到了我想要的转换类型，在这种情况下是一个模糊的转换，并提供可选的半径和采样率。

            Picasso
            .with(imageView.getContext())
            .load(imgUrl)
            .transform(new BlurTransformation(imageView.getContext(),10,8))
            .fit()
            .placeholder(placeHolder)
            .error(error)
            .into(imageView);

与前景图象的颜色的透明背景

3 个答案: