[英]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.