【问题标题】: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

标签: html css image overlay absolute


【解决方案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%;
          }
          

          【讨论】:

          • 它可能只适用于您的屏幕尺寸,实际上您应该获得屏幕尺寸的中心。
          猜你喜欢
          • 2011-04-01
          • 1970-01-01
          • 2023-04-06
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-03-13
          • 2020-10-11
          相关资源
          最近更新 更多