如何去除图片中的白色背景？

Question

我要的设计：

​

​

我现在的设计是：

​

​

如何使字母恢复正常颜色？

我的代码：

Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Stack(
                            children: [
                              Image.asset(
                                'assets/images/front_Page_Image.png',
                                height: 746,
                                width: constraints.maxWidth * 0.64,
                                fit: BoxFit.cover,
                              ),
                              Image.asset(
                                'assets/images/half_circle.png',
                                color: Color.fromARGB(255, 255, 255, 255),
                                //colorBlendMode: BlendMode.srcOver,
                              )
                             
                            ],
                          ),
                        ],
                      ),

Answer 1

对于透明的白色背景，可以使用以下颜色的不透明度。

color : Colors.white.withOpacity(0.5)

对于图像不透明度：

Container(
            child: new Text(
              'Hello world',
              style: Theme.of(context).textTheme.display4
            ),
            decoration: new BoxDecoration(
              color: const Color(0xff7c94b6),
              image: new DecorationImage(
                fit: BoxFit.cover,
                colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
                image: new NetworkImage(
                  'http://www.allwhitebackground.com/images/2/2582-190x190.jpg',
                ),
              ),
            ),
           ),

Answer 2

除文本外，您要“移除背景”的图像必须是透明的。意思是您想要删除白色的，实际上是容器的背景。这意味着您可以使用类似Colors.white.withOpacity(0.3)的东西来实现透明性。

将生成此图像的完整示例：

​

​

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Stack(
            children: [
              Card(
                child: Image.asset('assets/this_is_fine.jpg'),
              ),
              Container(
                width: MediaQuery.of(context).size.width * 0.5,
                color: Colors.white.withOpacity(0.3),
                child: Image.asset('assets/fine_text.png'),
              )
            ],
          )
        ],
      ),
    );
  }
}

Answer 3

我觉得你不应该把它们包在Card里。第一个Container也没有任何用途。所以就像

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Stack(
      children: [
        Image.asset(
          'assets/images/front_Page_Image.png',
          height: 746,
          width: constraints.maxWidth * 0.64,
          fit: BoxFit.cover,
        ),
        Container(
          alignment: Alignment.topLeft,
          child: Image.asset(
              'assets/images/half_circle.png'),
        )
      ],
    ),
  ],
)