关于CSS：Python Dash Div整页背景图片


Python dash Div full page background image

抱歉，我是破折号，CSS，HTML编码的新手。

我在Python上使用Dash，我想要一个带有图像的简单的整页背景。

我正在使用此CSS：https://codepen.io/chriddyp/pen/bWLwgP.css

我尝试使用其他CSS(https://necolas.github.io/normalize.css/8.0.1/normalize.css)，因为我读到这是一个边际问题，但是没有用

我已经阅读了很多有关此问题的讨论，但我无法针对我的目的对其进行修复

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app       = dash.Dash(__name__,
                      external_stylesheets = external_stylesheets)


app.title ="Q"


colors = {'background': '#ffffff',
          'bg_home': '#666666',
          'text': '#ffa500',
          'background_plot': '#cccccc',
          'text_plot': '#000000'}

app.config['suppress_callback_exceptions']=True
image   = 'url(https://c.wallhere.com/photos/a1/fc/1920x1080_px_Albert_Einstein_Formula_mathematics_physics_science_Special_Relativity-549404.jpg!d)'

app.layout = html.Div(

                className='row',
                  style={
                          'verticalAlign':'middle',
                          'textAlign': 'center',
                          'background-image':image,


                            },

                  children= [
                           html.Div(
                                   id='Username',
                                    style={'textAlign': 'center',
                                           'verticalAlign':'middle',
                                           },
                                    children= [        
                                            html.H3('Login',
                                                        style={'textAlign': 'center',
                                                           'color':'orange',
                                                           'fontWeight': 'bold',
                                                               },                                                      
                                                    ),
                                            html.Div(            
                                                    className='row',
                                                    children=[
                                                         dcc.Input(id = 'user',
                                                                   style={'margin-top':20},
                                                                  type='text',
                                                                  placeholder='Username'
                                                                  )
                                                             ]
                                                     ),
                                            html.Div(className='row',
                                                     children=[
                                                        dcc.Input(id = 'psw',
                                                                  style={'margin-top':20},
                                                                  type='text',
                                                                  placeholder='Password'
                                                                  )
                                                                ]
                                                     ),
                                            html.Div(className='row',  
                                                     children=[
                                                         html.Button('Login',
                                                                    id='log',
                                                                    style={'background-color':'white',
                                                                            'color':'black',
                                                                            'margin-top': 20,
                                                                            'textAlign':'right'},
                                                                   ),
                                                             ]
                                                     )


                                              ])


                           ]
                    )

if __name__ == '__main__':
    app.run_server(debug=True,host='0.0.0.0',port=8050)

我没有得到错误，但是我只得到页面的1/3(或多或少)与背景图片并登录Div，页面的其余部分完全变为白色。

我只想要一个带有背景图片的完整页面，并在中心登录

谢谢你们

在CSS body标记中定义文档的整个主体，而div是文档的一部分，有两种方法可以使此工作正常进行。

  • 使div覆盖整个页面并将图像设置为div

    • 请参考这里：
    制作一个覆盖整个页面的div

    修改后的代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    className='row',
    style={
      'verticalAlign':'middle',
      'textAlign': 'center',
      'background-image':image,
      'position':'fixed',
      'width':'100%',
      'height':'100%',
      'top':'0px',
      'left':'0px',
      'z-index':'1000'
    },
  • 修改external_stylesheet中的body标记以具有属性background-image，
    • 1
    2
    3
    body {
       'background-image' : url(url!d);
    }