我刚刚开始使用HTML和一些基本的CSS,我在这里试图让Rocketship用一些简单的标签推送另一个图像,
我尝试了一切。
我现在有,
<div align="center" >
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="images.png">
<img class="ImageTwo" src="falcon9-render.png">
</div>
</marquee>
我已经尝试了一些现在在stylesheet.css中的CSS,这里是代码。
image {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
}
在这一点上,我甚至不知道我是否在正确的背景下使用z-index。如果很难看到我的视野,我会尽量用它下面的另一个图像推动和成像。或创建那种视觉,我不知道我是否必须编辑像素并对齐它们。火箭似乎在中心,但src =“images.png”在旁边,但它在标签下...
对不起,如果这是愚蠢和简单,但我找不到任何东西。
正如评论中所要求的那样; https://jsfiddle.net/7ohrpk42/
更新方案:
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>
没有jsFiddle,你的问题有点不清楚,但我认为你正在尝试这样做:
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>
您要尝试实现的目标可以通过将“f&* k you”图像设置为选框和背景大小的背景来“覆盖”。像这样:
marquee{
background: url('https://i.postimg.cc/g2ZJTkHk/images.png') no-repeat;
background-size: cover;
}
我更新了你的小提琴https://jsfiddle.net/0vd79j2h/
<marquee>
is Deprecated强烈建议避免使用<marquee>
- 它已被弃用并且正在逐渐过时。我们仍然可以自定义HTML元素来表现并使用<marquee>
(或者甚至使用JavaScript / jQuery)显示为CSS animation,尽管它不如CSS有效。以下演示仅使用CSS动画,唯一的图像实际上是字体(如emoticons)
.marquee {
width: 30%;
height: 50vh;
/* Required on Parent */
overflow: hidden;
font: 400 15vh/1.5 Consolas;
background: rgba(0, 0, 0, 1);
padding-left: 15px;
margin: 20px auto;
}
.marquee b,
.marquee i {
/* Required on Child*/
white-space: nowrap;
display: table-cell;
vertical-align: baseline;
/* Infinite Loops */
animation: climb 2s linear infinite;
animation-fill-mode: forwards;
/* Set to 0s in order to have a point of reference */
animation-delay: 0s;
}
.marquee i {
animation: fall 2s linear infinite;
}
/* Required for complex CSS animation */
/* Bottom to top / Left to right */
@keyframes climb {
0% {
transform: translate(-200%, 300%);
}
100% {
transform: translate(300%, -300%);
}
}
/* Top to bottom / Right to left */
@keyframes fall {
0% {
transform: translate(200%, -20%);
}
100% {
transform: translate(-300%, 300%);
}
}
<header class='marquee fall'>
<i>🌠</i><em>✨</em>
</header>
<header class='marquee climb'>
<b>🚀</b><em>🌌</em>
</header>