實(shí)際上，我正在嘗試制作一個(gè)輪播，其中圖像中間會(huì)有一個(gè)按鈕，但無法...請(qǐng)幫助...我正在發(fā)布我正在嘗試制作的該網(wǎng)站的照片，并發(fā)布我的代碼這里
1 回答
叮當(dāng)貓咪
TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊
您想要將圖像作為背景，并根據(jù)寬度和高度設(shè)置其樣式。然后你想要一個(gè)文本或內(nèi)容容器position: absolute;，這將導(dǎo)致你的文本覆蓋圖像。從那里開始設(shè)置display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;，這將使您的文本位于圖像的中心。
確保它包含在容器中，position: relative以便絕對(duì)定位的元素到達(dá)容器的邊界而不是頁面的邊界。
<div class="container">
<img class="image-class"/>
<div class="text-container">
your text elements here </div></div>.container {
position: relative;
}
.image-class {
width: 100%;
height: auto;
}
.text-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}這應(yīng)該會(huì)讓你接近你正在尋找的東西。我提供了一個(gè)帶有快速示例的 codepen：https ://codepen.io/sean-mooney/pen/ZEGNVrw
希望有幫助！
編輯
上面的示例演示了如何在圖像上對(duì)齊文本，但是在輪播中這可能有點(diǎn)不同。概念保持不變，但實(shí)施可能很棘手。我添加了另一個(gè)代碼筆，演示如何在輪播中使用該示例：
https://codepen.io/sean-mooney/pen/jOPogrY
- 1 回答
- 0 關(guān)注
- 97 瀏覽
添加回答
舉報(bào)
0/150
提交
取消