css - 在隐藏的 div 中时显示图像

标签 css

这一定很简单,但我看不出我的错误。

我有一个包含图像的 div。 div 的样式为 display:none。 div 消失了,但图像保持不变。这里是 plunk:

http://plnkr.co/edit/R3i7GZKOiiSvEj3vEuIE?p=preview

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #loading {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background: white;
        opacity:0.2;
        filter:alpha(opacity=20); /* For IE8 and earlier */
        overflow: hidden;
      }

      .centered {
        position:absolute;
        top: 50%;
        left: 50%;
      }

      .hide {
        display:none;
      }
    </style>
  </head>

  <body>

  <div id="loading hide">
    <img class="centered" src="http://www.woldsvets.co.uk/runnerapeman.gif" width="60px" border="0"/>
  </div>

  </body>

</html>

为什么图像在隐藏元素内时也不会隐藏?

谢谢!

最佳答案

您的 HTML 有误。应该是:

<div id="loading" class="hide">

在您的 CSS 中,您有 #loading 的规则和 .hide .你的 HTML,<div id="loading hide"> , 有一个因空格而无效的 ID。您可能打算使用我上面建议的 HTML。 plinkr example

关于css - 在隐藏的 div 中时显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18721582/

相关文章:

android - 网页未在 galaxy s4 股票浏览器上完全显示

javascript - 如何在Android 2.3中动态翻转图像

html - Outlook 2010 字体前景色/背景色 CSS 不能很好地配合

php - 如何自定义插入到 WordPress 帖子中的图像的 HTML 标记?

android - 根据设备屏幕尺寸自动将图像定位在图像上

css - 如何使具有不同 anchor 元素的div的整个背景颜色可点击

javascript - 由于同步调用而推迟样式更改

html - 在 div 内仅用两行包裹文本

javascript - 通过 jQuery 申请时出现 "width"问题

javascript - CSS3 关键帧动画 : End and stay on the last frame