Html 如何在div上覆盖图像_Html

Html 如何在div上覆盖图像

html

Html 如何在div上覆盖图像,html,Html,我有一个来自我的教授的评估，我需要创建一个div正方形并在上面覆盖一个图像。我曾尝试使用定位、索引和边距，但我不知道如何将图像覆盖在div上有人能帮我吗？教授的作业：我的代码结果：我的代码：正文{ 保证金：0； } 正文>*{ 最大宽度：250px；最大高度：250px； } 录像带{ 最大高度：425px； } .广场{ 宽度：75%；宽度：200px；高度：200px；背景颜色：蓝色；边框：10px虚线rgb（10241164）；边界半径：50px；位置：相对位

我有一个来自我的教授的评估，我需要创建一个div正方形并在上面覆盖一个图像。我曾尝试使用定位、索引和边距，但我不知道如何将图像覆盖在div上

有人能帮我吗？教授的作业：

我的代码结果：

我的代码：

正文{
保证金：0；
}
正文>*{
最大宽度：250px；
最大高度：250px；
}
录像带{
最大高度：425px；
}
.广场{
宽度：75%；
宽度：200px；
高度：200px；
背景颜色：蓝色；
边框：10px虚线rgb（10241164）；
边界半径：50px；
位置：相对位置；
}
img{
宽度：66%；
保证金权利：-100%；
位置：绝对位置；
z指数：1；
不透明度：0,5；
}

问题是，您在图像上添加了绝对值，但乡绅需要绝对值，图像需要相对值

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Assignment-E1</title>
        <style>
          body {
            margin: 0;
          }
    
          body > * {
            max-width: 250px;
            max-height: 250px;
          }
    
          video {
            max-height: 425px;
          }
    
          .square{
            width: 200px;
            height: 200px;
            background-color: blue;
            border: 10px dashed rgb(10, 241, 164);
            border-radius: 50px;
            position: absolute;
          }
    
          img{
            width: 66%;
            margin-right: -100%;
            position: relative;
            z-index: 1;
            opacity: 0,5;
          }
        </style>
      </head>
      <body>
        <div class="square"></div>
        <img src="/images/100km.png" alt="100km bord">
      </body>
    </html>


分配-E1
身体{
保证金：0；
}
正文>*{
最大宽度：250px；
最大高度：250px；
}
录像带{
最大高度：425px；
}
.广场{
宽度：200px；
高度：200px；
背景颜色：蓝色；
边框：10px虚线rgb（10241164）；
边界半径：50px；
位置：绝对位置；
}
img{
宽度：66%；
保证金权利：-100%；
位置：相对位置；
z指数：1；
不透明度：0,5；
}

这应该可以做到。我创建了一个主容器来容纳正方形和图像，并给它一个类容器。然后使用不同的位置将其设置为与您拥有的匹配

//HTML
<div class='container'> 
<div class="square"></div>
        <img src="/images/100km.png" alt="100km bord">
</div>

绝对定位元素需要位于相对定位元素的内部。否则它将相对于根元素定位

在这种情况下，您的图像需要位于

正文{
保证金：0；
}
正文>*{
最大宽度：250px；
最大高度：250px；
}
.广场{
位置：相对位置；
宽度：75%；
宽度：200px；
高度：200px；
背景颜色：蓝色；
边框：10px虚线rgb（10241164）；
边界半径：50px；
}
img{
宽度：66%；
位置：绝对位置；
最高：50%；
左：50%；
z指数：1；
不透明度：0,5；
边界半径：50%；
}

这起作用了

正文{
保证金：0；
}
正文>*{
最大宽度：250px；
最大高度：250px；
}
.广场{
位置：相对位置；
宽度：75%；
宽度：200px；
高度：200px；
背景颜色：蓝色；
边框：10px虚线rgb（10241164）；
边界半径：50px；
}
img{
宽度：66%；
位置：绝对位置；
最高：50%；
左：50%；
z指数：1；
不透明度：0,5；
边界半径：50%；
}

您是否尝试过使用top、left、right和bottom属性定位孩子？是的，我尝试过，但我无法将其置于彼此之上，有时div只是dissapeared@klaasvanburen10你试过使用“相对”和“绝对”这样的位置吗。对于叠加，你也可以给一个类增加不透明度。是的，我也尝试了相对和绝对。我为你设置了一个aswer，你需要切换周围的两个位置。然后你可以开始使用边距或上/下边距来做你的头寸。


    .container{
        position: relative;
    }

      .square{
        width: 75%;
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: blue;
        border: 10px dashed rgb(10, 241, 164);
        border-radius: 50px;
        position: relative;
      }

      img{
        width: 66%;
        margin-right: -100%;
        position: absolute;
        z-index: 2;
         top: 50%;
        left: 50%;
        opacity: 0.5;
      }