gpt4 book ai didi

html - 在 CSS 样式化按钮后,文本未显示

转载 作者:行者123 更新时间:2023-11-28 14:41:40 24 4
gpt4 key购买 nike

我目前正在尝试学习一些 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com