html - 我需要有关我的 CSS 的帮助，以获取显示 block 上的内容。这是添加标题所必需的

Question

这是我的 HTML

<div class="about-buttonback"><div class="about-button"></div></div>

这是 CSS:

.about-button {
    color:#fff;  
    content: "Calender";  
    Display: block;  
    position: absolute;  
    width: 860px;  
    height: 40px;  
    top:5px;  
    left:5px;  
    text-indent: -9999px;  
    -webkit-border-radius: 6px;  
    -moz-border-radius: 6px;  
    border-radius: 6px;  
    background-color: #d1d2d4;  
    background-image: -webkit-gradient(linear, left top, left bottom, from(#323232), to(#2a2829));  
    background-image: -webkit-linear-gradient(top, #000, #2a2829);  
    background-image: -moz-linear-gradient(top, #000, #2a2829);  
    background-image: -o-linear-gradient(top, #000, #2a2829);  
    background-image: linear-gradient(to bottom, #000, #2a2829);  
    box-shadow: 1px 1px 1px #000;  
    }

 .about-buttonback {
    display: block;
    position: absolute;
    width: 870px;
    height: 50px;
    top:0px;
    left: 35px;
    text-indent: -9999px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: #d1d2d4;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6b6b6b), to(#000));
    background-image: -webkit-linear-gradient(top, #4b4b4b, #000);
    background-image: -moz-linear-gradient(top, #4b4b4b, #000);
    background-image: -o-linear-gradient(top, #4b4b4b, #000);
    background-image: linear-gradient(to bottom, #4b4b4b, #000);
}

我正在尝试在带有标题的叠加层上做更多的事情。我需要说 Calender 的内容，但它没有显示在 block 上。有什么建议么？

非常感谢您的帮助!

Answer 1

首先，您不需要 display: block;，其次，您无法看到文本，因为您使用的是 text-indent: -9999px 这只会将该 block 中的任何文本移出视口(viewport)。

Demo

此外，确保将 position: absolute; 元素包装在 position: relative; 容器下，否则它们会弄乱你的布局。