python - Python dash Div 整页背景图片
问题描述
抱歉,我对 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 的页面,页面的其余部分完全是白色的。
我只想要一个带有背景图片的完整页面并在中心登录
谢谢你们
解决方案
在 cssbody
标签中定义了文档的整个主体和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'
},
- 修改
body
标签中external_stylesheet
的属性background-image
,
body {
'background-image' : url(url!d);
}
推荐阅读
- javascript - 如果元素不存在,如何使用 JS 删除类?
- javascript - 将 pdf 读取为 ArrayBuffer 以将其存储在包含详细信息的 json 文件中
- c# - 找不到类型或命名空间 ExcelDataReader - 但一切编译并运行正常
- python - 如何为 tkinter 标题添加时间倒计时
- amazon-web-services - 为什么我无法从 Lambda 函数访问我的 S3 存储桶?
- c# - C# 将多个值从 TcpClient 发送到远程服务器
- java - 使用 Springboot 读取自己的属性文件
- javascript - 从 IIS 8 运行时,C# .aspx javascript .ajax 自动完成文本框返回 500 错误
- symfony - Symfony Doctrine - 在多对多关系中,为什么补丁在一个方向上工作而不是另一个方向
- angular - 如果条件,防止垫选项选择