flutter - 颤振：获取css：在图像应用背景的效果之后

Question

我有 CSS 规则来为图像添加背景有一个白色背景，如下所示

.product-img:after {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(40,44,63,.05);
   content: '';
   background-blend-mode: overlay;
 }

结果 [![在此处输入图像描述][3]][3]

想要快速获得相同的效果，我尝试了几个小部件，如 Stack、Position，
但无法达到相同的效果。

我的图像加载小部件：

FadeInImage(
   image: NetworkImage(
   "my-url"
   ),
   placeholder: AssetImage('assets/images/load_fut.png'),
),

标签： flutterflutter-web

Answer 1

Seems your images have solid white background. So to display on top of white background need to play bit with blendmode to achieve desired effect. Here is output close to what you're trying to achieve.

Update : Using cached_network_image

Add Depednecy cached_network_image: ^2.2.0+1

  @override
  _ColorPageState createState() => _ColorPageState();
}

class _ColorPageState extends State<ColorPage> {
  @override
  Widget build(BuildContext context) {
    return 
    CachedNetworkImage(
      height: 200,
      width: 400,
      colorBlendMode: BlendMode.darken,
      color: Color.fromARGB(20, 40, 44, 63),
      imageUrl:
          "https://tacskey.com/image/cache/catalog/categories/Cold%20Cuts/chicken-nuggets-600x350.jpg",
      placeholder: (context, url) =>  Image.asset(
          'assets/loader_.png',
          height: 50,
          width: 50,
      ),
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  }
}

Output gif :