我目前正在尝试学习一些 HTML 和 CSS 来获得乐趣，并为我的“进入页面”制作了一个我认为非常酷的按钮，但是在添加了最后的效果之后，文本没有显示出来。删除“border-left,right,top”后，文本显示但框失去了全部效果。我目前将按钮设置为显示在屏幕中央，同时我有一个占据整页的背景图像。颜色应该与背景图像相似，我已经检查过它们不应该相互融合
CSS 代码
input.Button {
text-align: center;
position: absolute;
top: 50%;
width: 40%;
height: 100px;
margin-left: 30%;
margin-right: 30%;
background: #000000;
color: #000000;
opacity: 0.3;
font-size: 400%;
color: snow;
font-family: "Impact", Charcoal, serif;
letter-spacing: 0.3em;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid slategray;
}
编辑:HTML 代码
<body>
<div class="image">
<img src="landingpage.jpg">
<div class="button">
<form>
<input class="Button" type="button" value="Enter" onclick="window.location.href='about.html'" />
</form>
</div>
</div>
</body>
input.Button {
text-align: center;
position: absolute;
top: 50%;
width: 40%;
height: 100px;
margin-left: 30%;
margin-right: 30%;
background: #000000;
color: #000000;
opacity: 0.3;
font-size: 400%;
color: snow;
font-family: "Impact", Charcoal, serif;
letter-spacing: 0.3em;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid slategray;
}<body>
<div class="image">
<img src="landingpage.jpg">
<div class="button">
<form>
<input class="Button" type="button" value="Enter" onclick="window.location.href='about.html'" />
</form>
</div>
</div>
</body>最佳答案
顶部边框的大小与按钮的高度相同，因此文本基本上被推离了它。尝试将 border-top 设置为 50px，您会看到它重新出现。
您可以在这里尝试一下: http://www.cssdesk.com/zPURs
关于html - 在 CSS 样式化按钮后，文本未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52846901/