HTML/CSS实现背景图作为可点击链接时的多类问题求解

问题对应根因 #

• 链接未填满背景图空间：a标签默认是行内元素，仅适配自身包裹内容的宽度高度，不会主动撑满父容器.card的整体范围。
• 链接移出屏幕：没有给.card设置定位上下文，一旦给链接添加绝对定位规则，元素会以浏览器视口为参照，直接脱离卡片位置跑到屏幕可视区外。
• 卡片错位：.card使用inline-block实现横向排列时，默认按文字基线对齐，会出现高低错位；同时内部元素的默认外边距会进一步打乱排版位置。
• h5超出卡片范围：h5是自带默认上下外边距的块级元素，外边距会穿透父容器的内边距区域，加上没有对标题位置做约束，就会跑出背景图覆盖范围。

修正后代码 #

HTML结构无需大改，仅优化样式逻辑：

<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;
    /* 新增修复属性 */
    position: relative;
    vertical-align: top;
    overflow: hidden;
}
.card1{
    /* 实际使用时将图片替换为项目内相对路径，不要直接用本地file协议路径 */
    background-image: url(cakewallpaper.jpg);
}
.card:hover{
    transform: translateY(-10px);
}
/* 让链接完全覆盖卡片范围 */
.card a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    box-sizing: border-box;
}
h5{
    text-shadow: 0 0 5px #999;
    font-size: 20px;
    margin: 0;
    color: #fff;
}

核心修复逻辑说明 #

• position: relative 是内部绝对定位元素的定位参照，加在.card上之后，内部链接的所有定位都会以卡片本身为边界，不会再乱跑移出屏幕。
• 链接通过绝对定位设置宽高100%，完全覆盖卡片的背景图区域，实现整张卡片可点击的效果，不存在链接范围小于背景图的问题。
• vertical-align: top消除了inline-block元素默认基线对齐带来的错位问题，所有卡片会按顶部对齐排列，和.card类设置的预期位置一致。
• 清除h5的默认外边距，搭配overflow: hidden裁剪卡片外溢出的内容，标题会稳定留在卡片的背景图范围内。

内容的提问来源于stack exchange，提问作者jmc 'xoxo