[英]Python dash Div full page background image
抱歉,我对 dash、css、html 编码很陌生。
我在 Python 上使用 Dash,我想要一个带有图像的简单整页背景。
我正在使用这个 CSS: https ://codepen.io/chriddyp/pen/bWLwgP.css
我尝试使用不同的 CSS( https://necolas.github.io/normalize.css/8.0.1/normalize.css ),因为我读到这是一个边距问题,但它没有用
我已经阅读了很多关于这个问题的讨论,但我无法为我的目的修复它
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
修改了一点代码,
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
属性,body {
'background-image' : url(url!d);
}
有两种方法可以完成此操作:
注意:在程序的根目录中创建文件夹“assets”并将图像放入其中是一种很好的做法。
方法一:
app.layout = html.Div([ ...fill your children here... ],
style={'background-image': 'url(/assets/image.jpg)',
'background-size': '100%',
'position': 'fixed',
'width': '100%',
'height': '100%'
})
方法二:
app.layout = html.Div([ ...fill your children here... ],
style={'background-image': 'url(/assets/image.jpg)',
'background-size': '100%',
'width': '100vw',
'height': '100vh'
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.