下面的代碼按照我的期望作業正常。但問題是影片在容器部門內不起作用。影片顯示在頁面底部,但不在容器內。可以幫幫我嗎,謝謝
#my_move_imgs {
display: inline-block;
bottom: 15%;
position: absolute;
overflow-x: hidden;
animation: moveImage 6s linear infinite;
left: 1px;
white-space: nowrap;
}
@keyframes moveImage {
100% {
transform: translateX(calc(100vw - 100px));
}
}
<div id ="sew_container" style="height:220px; width:100%; border: 5px solid blue; border-radius: 5px; text-align: center; background-image: url('Images/sew_bckimg.jpg'); background-size: 100% 100%;">
<div id="my_move_imgs">
<img src="Images/Image1.jpg" height="80px" width="100vh" border="2px solid #555">
<img src="Images/Image2.jpg" height="80px" width="100vh" border="2px solid #555">
<img src="Images/Image3.jpg" height="80px" width="100vh" border="2px solid #555">
</div>
</div>
uj5u.com熱心網友回復:
嘗試去除底部:15%;來自#my_move_imgs
#my_move_imgs {
display: inline-block;
position: absolute;
overflow-x: hidden;
animation: moveImage 6s linear infinite;
left: 1px;
white-space: nowrap;
}
@keyframes moveImage {
100% {
transform: translateX(calc(100vw - 100px));
}
}
<div id ="sew_container" style="height:220px; width:100%; border: 5px solid blue; border-radius: 5px; text-align: center; background-image: url('Images/sew_bckimg.jpg'); background-size: 100% 100%;">
<div id="my_move_imgs">
<img src="Images/Image1.jpg" height="80px" width="100vh" border="2px solid #555">
<img src="Images/Image2.jpg" height="80px" width="100vh" border="2px solid #555">
<img src="Images/Image3.jpg" height="80px" width="100vh" border="2px solid #555">
</div>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/504835.html
標籤:javascript php html css
下一篇:資料不會從本地存盤中檢索