如何在 plotly 仪表板引导程序中使用覆盖？

Question

如何在轮播 plotly 仪表板引导程序中使用覆盖？

我正在为 python (dash_bootstrap_components - dbc) 使用 bootstrap，并且我有一个 Carousel 标签，其中包含三个图像和一些我想覆盖在我的 carousel 右侧的文本。

当前的

期望：浮动

这是代码：

应用程序：

from dash import Dash, html
import dash_bootstrap_components as dbc

from components.callbacks import modals

app = Dash(__name__, title = 'page test',
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)

app.layout = dbc.Container([

    dbc.Container([

        dbc.Carousel(
            items=[
                {"key": "1", "src": "/assets/images/NY.jpg"},
                {"key": "2", "src": "/assets/images/tokio.jpg"},
                {"key": "3", "src": "assets/images/paris.jpg"},
            ],
            controls=False,
            indicators=False,
            interval=2000,
            ride="carousel",      
        ),

        dbc.Container([
            dbc.Container([
                dbc.Row(children=[

                    dbc.Col([

                    html.H1("Title", className="sub_title"),
                    html.P("Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, illo eos ad \
                            inventore reiciendis alias impedit repellendus dolorum. Itaque cum perspiciatis nihil \
                            mollitia adipisci est reprehenderit a, autem placeat qui. Fugit?"),
                    modals,

                    ],width={"size": 6, "offset": 6}),

                ], className="row text-center"), 
            ]),
        ], id="overlay"),


    ], fluid=True, id="main", className='main'),


], fluid=True, class_name='home') 


if __name__ == '__main__':
    app.run_server(debug=True)

CSS：

.home{
    padding: 0px 0px 0px 0px;
}

.main{
    padding: 0px 0px 0px 0px;
}

#main .carousel-inner img{
    max-height: 70vh;
    object-fit: cover;
    filter: grayscale(70%);
}

#carousel {
    position: relative;
}

#carousel .overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0,0,0,0.5);
    color: white;
    
}

有什么方法可以做到这一点？

Answer 1

也许使用className="fixed-top"会有所帮助。 我没有你的模式，所以我使用了 dbc.Card。 请检查以下代码：

from dash import Dash, html
import dash_bootstrap_components as dbc

df = px.data.gapminder()
fig = px.area(df, x="year", y="pop", color="continent", line_group="country")

app = Dash(__name__, title = 'page test',
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)

app.layout = dbc.Container([
        dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
            html.H1("Title", className="sub_title"),
            html.P("Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, illo eos ad \
                            inventore reiciendis alias impedit repellendus dolorum. Itaque cum perspiciatis nihil \
                            mollitia adipisci est reprehenderit a, autem placeat qui. Fugit?")
                ])
            ])
        ],width={"size": 3, "offset": 9})
    ], className="fixed-top"),
    dbc.Row([
        dbc.Carousel(
            items=[
                {"key": "1", "src": "/assets/1_times_square_night_2013.jpg"},
                {"key": "2", "src": "/assets/1_times_square_night_2013.jpg"},
                {"key": "3", "src": "assets/1_times_square_night_2013.jpg"},
            ],
            controls=False,
            indicators=False,
            interval=2000,
            ride="carousel",      
        ),
    ]),
    dbc.Row([
        dbc.Col([
            dcc.Graph(figure=fig)
        ])
    ]),
    dbc.Row([
        dbc.Col([
            dcc.Graph(figure=fig)
        ])
    ])
], fluid=True) 


if __name__ == '__main__':
    app.run_server(debug=True)