如何使图像在 <marquee> 中向上推另一个图像?标签 [英] How do I make an image push up another image within a <marquee> tag
问题描述
我刚刚开始使用 HTML 和一些基本的 CSS，我在这里尝试使用一些简单的标签让 Rocketship 推送另一个图像，
我什么都试过了.
我现在有，
<选取框行为=滚动"方向=向上"><img class="ImageOne" src="images.png"><img class="ImageTwo" src="falcon9-render.png"></选框>
我现在已经尝试了我的 stylesheet.css 中的一些 CSS，这是代码.
image {位置:相对；宽度:100px；高度:100px；边框:1px纯红色；}.imageOne {z-索引:0；}.imageTwo {z-索引:1；}此时，我什至不知道我是否在正确的上下文中使用 z-index.如果很难看到我的愿景，我基本上会尝试在它下面用另一个图像来推动和想象.或创建那种视觉效果，我不知道是否必须编辑像素并将它们对齐.火箭似乎在中心，但 src="images.png" 在侧面，但在标签下......
对不起，如果这是愚蠢和简单的，但我找不到任何东西.
如评论中所要求；https://jsfiddle.net/7ohrpk42/
更新的解决方案:
img {左边距:自动；右边距:自动；显示:块；}<body bgcolor="#add8e6"><title>最糟糕的网站</title><div align="center"><选取框行为=滚动"方向=向上"><img class="ImageOne" src="https://i.postimg.cc/g2ZJTkHk/images.png"><img class="ImageTwo" src="https://i.postimg.cc/mD5W47bx/falcon9-render.png"></选框> </html>
如果没有 jsFiddle，你的问题有点不清楚，但我认为你正在尝试做这样的事情:
img {位置:相对；宽度:100px；高度:100px；边框:1px纯红色；}.imageOne {边距:无；}.imageTwo {边距:无；}<选取框行为=滚动"方向=向上"><img class="ImageOne" src="https://place-hold.it/20x30"><br><img class="ImageTwo" src="https://place-hold.it/20x30"></选框>I am just starting HTML and some basic CSS, Im here trying to make a Rocketship push up another image with some simple tags,
Ive tried everything.
I have right now,
<div align="center" >
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="images.png">
<img class="ImageTwo" src="falcon9-render.png">
</div>
</marquee>
I have tried some CSS which is in my stylesheet.css right now, and here is that code.
image {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
}
and at this point, i dont even know if im using z-index in the right context. If its hard to see my vision, Im bascially trying to push and image up with another image under it. or create that kind of visual, i dont know if i have to edit the pixel and align them up. The rocket seems to be being in the center but the src="images.png" is on the side but its under the tag...
Sorry if this is dumb and simple but I couldnt find anything.
As Requested in comments; https://jsfiddle.net/7ohrpk42/
Updated Solution:
img {
margin-left: auto;
margin-right: auto;
display: block;
}
<DOCTYPE HTML!>
<html>
<body bgcolor="#add8e6">
<title>The Most Best Worst Websites</title>
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://i.postimg.cc/g2ZJTkHk/images.png">
<img class="ImageTwo" src="https://i.postimg.cc/mD5W47bx/falcon9-render.png">
</marquee>
</div>
</body>
</html>
Your questions a little unclear without a jsFiddle, but I think you are trying to do something like this:
img {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
margin: none;
}
.imageTwo {
margin: none;
}
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://place-hold.it/20x30">
<br>
<img class="ImageTwo" src="https://place-hold.it/20x30">
</marquee>
</div>
这篇关于如何使图像在 <marquee> 中向上推另一个图像?标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
