我正在做一个网站在Streamlit。与HTML和CSS,我试图把一个可点击的标志左上角,和文字死点在同一行,无论标志的位置。我已经设法使标志时,它是不是位于同一行的标志与base64编码。然而,当我尝试使用div技巧把logo和标题放在同一行而不影响标题的位置时,只有logo的顶部是可点击的。2有人能解释一下我的代码哪里出错了吗?
import base64
from typing import Final
from pathlib import Path
import streamlit as st
HOME_DIR: Final = Path(__file__).parent.resolve()
TITLE: Final = "Example page"
@st.cache_data(persist="disk")
def clickable_image(img_path: str, link: str) -> str:
"""By default, st.image doesn't support adding hyperlinks to a local image, so I
have to decode a local image to base64 and pass it to HTML markdown instead.
Parameters:
-----------
img_path : str
Path to where your image is stored.
link : str
URL which you would like to open when the image is clicked on.
Returns:
-----------
str
A cached hyperlink where your local image is stored inside via base64 encoding.
"""
img_path = HOME_DIR / img_path
img_bytes, ext = img_path.read_bytes(), img_path.suffix
encoded_img = base64.b64encode(img_bytes).decode()
return (
f'<div style="display: inline-block;">'
f'<a href="{link}" target="_blank">'
f'<img src="data:image/{ext};base64,{encoded_img}" width="100"></a>'
f"</div>"
)
def pretty_title(title: str, img_path: str, link: str) -> None:
"""Make a centered title, and give it a red line. Adapted from
'streamlit_extras.colored_headers' package.
Parameters:
-----------
title : str
The title of your page.
img_path : str
Path to where your image is stored.
link : str
URL which you would like to open when the image is clicked on.
"""
# Define the logo and text
logo_html = clickable_image(img_path, link)
text_html = "<h2 style='text-align: center; margin-top: 0;'>" f"{title}</h2>"
# Define the HTML for the logo and text side by side
html = (
"<div style='position: relative;'>"
f"<div style='position: absolute; top: 0; left: 0;'>{logo_html}</div>"
f"<div style='text-align: center;'>{text_html}</div>"
"</div>"
"<hr style='background-color: #ff4b4b; margin-top: 0;"
" margin-bottom: 0; height: 3px; border: none; border-radius: 3px;'></hr>"
)
# Render the HTML in the Streamlit app
st.markdown(html, unsafe_allow_html=True)
def main() -> None:
st.set_page_config(
page_title=TITLE,
page_icon="📖",
layout="wide"
)
pretty_title(TITLE, "logo.png", "https://www.google.com/")
main()
1条答案
按热度按时间z9smfwbn1#
我通过为图像div设置更高的
z-index
优先级来解决这个问题: