如何修复div上的图像？答案

【问题标题】：How to fix an image over the div?如何修复div上的图像？
【发布时间】：2015-12-11 20:56:14
【问题描述】：

http://estreetusa.us/piechart/ 我想修复中心图像，即上面写着 24 小时，请建议。 back 是背景图像的 css，fish 是覆盖图像的 css .. 相对的；

提前致谢！！

【问题讨论】：

根据您的喜好更改左侧和顶部的值。
给我们你的代码或创建一个 Codepen/JS Fiddle

【解决方案1】：

将您的鱼类更改为：

.fish {
   background-image: url(24.png);
   width: 196px;
   height: 196px;
   position: relative;
   margin: -295px auto;
   right: 15px;
}

【讨论】：

【解决方案2】：

在这种情况下，您有多种选择。

您可以将 left 设置为 50%，然后通过将 margin-left 设置为 -98px（元素宽度的一半）将其居中。不要忘记给它的父位置：relative;

.fish {
    background-image: url("24.png");
    width: 196px;
    height: 196px;
    position: absolute;
    top: 426px;
    left: 50%;
    margin-left: -98px;
}

或者您可以将 24.png 放入一个 img 元素并将其显示设置为内联或内联块。然后你给父文本对齐：中心。

如果时钟上方的内容没有改变（高度），我会选择第一个选项。否则就选择第二个。

祝你好运:)

【讨论】：

【解决方案3】：

首先将position: relative添加到包含这两个元素的section元素，

然后将fish DIV 放入back DIV 中（使鱼的位置依赖于背部）并相应地更改顶部和左侧设置（近似设置：顶部：96px；左侧：471px；）

【讨论】：

【解决方案4】：

为你当前的 HTML 使用这个 css。

background-image: url(24.png);
width: 196px;
height: 196px;
position: relative;
top: -300px;

对于上述css上边距必须针对特定设备进行调整

要使图像完美居中，您必须将图像嵌套到画布中然后在css下面应用

background-image: url(24.png);
width: 196px;
height: 196px;
position: relative;

【讨论】：

【解决方案5】：

在您的 css 文件中添加此规则：

.fish{
    margin-left:3.5%;
}

【讨论】：

它可能只适用于您的屏幕尺寸，实际上您应该获得屏幕尺寸的中心。