php - 我将 Anchor 标签设为按钮,但它不起作用
问题描述
我试图将锚标记作为按钮并尝试在其上添加一些 css 但它不可点击这是我的 html 代码。我正在关注一个 youtube 教程,我 100% 关注了视频,但我的不工作,对不起,我只是网络开发的新手,谢谢你的帮助。
<body>
<!-- Welcome Page -->
<section id="ulambg">
<div class="ulambg container">
<div>
<h1>Eatwell</h1>
<a href="#" type="button" class="btnulam">Ready to Eat</a>
<a href="#" type="button" class="btn btn-primary">Ready to Cook</a>
</div>
</div>
</section>
<!-- End Welcom Page -->
而这是我在程序中使用的css,是不是因为Java?我读了一些论坛,说如果你在你的机器上禁用了你的java,一些java函数将无法工作。
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 15px;
font-family: 'Raleway', sans-serif ;
}
a {
text-decoration: none;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/*Welcome Page Section Ulambg*/
#ulambg {
background-image: url(./img/bg.jpg);
background-size: cover;
background-position: top center;
position: relative;
}
#ulambg::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .5;
}
#ulambg h1 {
color: white;
width: fit-content;
font-size: 4rem;
position: relative;
}
#ulambg .btnulam {
display: inline-block;
padding: 10px 30px;
color: blue;
background-color: transparent;
border: 2px solid blue;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px;
transition: .3s ease;
transition-property: background-color;
}
#ulambg .btnulam:hover {
color: white;
background-color: blue;
}
/*Welcome Page Sectio Ulambg*/
解决方案
添加z-index: -1
,#ulambg::after
它的背景,不应该覆盖页面。
推荐阅读
- python - 如何使用前一行的值计算列值?
- git - Q:致命,远端意外挂断 errno10054
- r - 将 Tibble 元素传递给函数参数
- automated-tests - 如何使用机器人框架获取在 XML 中重复的标签属性的值?
- ios - 线程 1: EXC_BAD_ACCESS (code=2, address=0x16f2dbfd0) 这段代码是什么意思>
- php - php:apache Docker 容器中的 PEAR 邮件
- django - Django 3 - 关系的“x”列中的空值
- node.js - Mongoose:如何从两个相关的模式中保存数据?
- r - 在嵌套的df中使用地图提取数据
- c# - 使用内部循环遍历巨大的 c# 列表