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);
}

我正在尝试通过块上的标题覆盖更多。我需要内容来说明日历，但它没有出现在块上。有什么建议？

非常感谢您的帮助！

Answer 1

首先，您不需要display: block;，其次，您无法看到该文字，因为您使用text-indent: -9999px只会移动block中的任何文字离开视口。

Demo

另外，请确保将position: absolute;元素包装在position: relative;容器下，否则会弄乱您的布局。

Answer 2

做这件事： - Fiddle

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

Answer 3

如果你在Div中添加任何文字，你需要内容在块上说Calender 让我们说“**<div class="about-button">Calendar </div>**”，但文字也不会在此之后显示，因为您将“ text-indent：-9999px; ”添加到您需要删除的两个类中为了让你的文字显示在块上。

我需要协助我的CSS，以获取显示块上的内容。这是添加标题所必需的

3 个答案: