Question

我有以下css文件：

.h_bg{
    padding:22.4% 0;
    background-size:100% auto;
    background-position:center top;
    background-repeat:no-repeat;
    position:relative;
    height: 2em;
}
.h_bg h1{
    width: 100%;
    position:absolute;
    line-height:1;
    top: 23%;
    color:#fff;
    font-size:500%;
    text-align: center;
    padding-bottom: 15%;
    background-size:89px 183px;
}

@media screen and (min-width:1001px)
{
    .h_bg{
        background-image:url(/images/bg1-desktop.png);
    }
}

@media screen and (min-width:1001px) and (max-width:1300px)
{
    .h_bg h1{
        background-size:7% auto;
        padding-bottom: 16%;
    }
}

以下html页面：

<!doctype html>
<html>

    <head>
            <title>Beauty app</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>

    <body>

    <div class="h_bg">
        <h1>text</h1>
    </div>

    </body>
</html>

css链接到css文件所在的地方。不幸的是，文本字符串是不可见的，此代码显示空白页面。有什么问题？任何帮助，将不胜感激。

Answer 1

问题在于：

color:#fff;

#fff强制你的h_bg类中的H1文本为白色，因此它是不可见的

将来你也会遇到类似的问题。这是你可以调试它的方法。

打开浏览器（我正在使用chrome），然后右键单击元素，对于您的实例来说这很难，因为您无法看到它然后单击inspect元素。

在右下角，您应该会看到自己的CSS属性，尝试使用它，直到找到问题为止。

CSS div块使文本消失

1 个答案: