按照本教程,尝试使用 html 和 css 技巧来给人一种使用背景图像作为可点击链接的印象。但是,由于两个问题,我无法上班:
链接没有填满背景图片的空间
链接不会移出屏幕
卡片会移动到别处,它不会去我想放的地方(来自我放在 .card 中的代码)
h5 不会留在 .card 背景图片中
我是 html 和 CSS 的初学者
<div class="card card1">
<a href="#"><h5>Cakes</h5></a>
</div>
.card{
width: 200px;
height: 230px;
display: inline-block;
border-radius: 10px;
padding: 15px 25px;
box-sizing: border-box;
cursor: pointer;
margin: 10px 15px;
background-position: center;
background-size: cover;
transition: transform 0.5s;
}
.card1{
background-image: url(file:///C:/Users/ACER/Desktop/Easy-Bake/cakewallpaper.jpg);
}
.card:hover{
transform: translateY(-10px);
}
h5{
text-shadow: 0 0 5px #999;
font-size: 20px;
}
答案 0 :(得分:2)
您应该将 div 包裹在锚标记中
<a href="#">
<div class="card card1">
<h5>Cakes</h5>
</div>
</a>