css图片热区自适应 |如何用css写乘法表

.nav{
position: relative;
}
.nav a{
display: block;
position: absolute;
}
.nav a:hover{
opacity: 0.5;
}
.nav .home{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-image: url('home.png');
background-size: cover;
}
.nav .about{
top: 0;
left: 0;
width: 20%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.nav .contact{
top: 0;
right: 0;
width: 20%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.nav .products{
bottom: 0;
left: 0;
width: 50%;
height: 20%;
background-color: rgba(0,0,0,0.5);
}
.nav .services{
bottom: 0;
right: 0;
width: 50%;
height: 20%;
background-color: rgba(0,0,0,0.5);
}

以上代码实现了一个简单的导航菜单，其中每个链接都是一个绝对定位的元素，通过设置不同的top、left、width、height等属性，可以实现不同的响应区域。CSS中的transform属性可以让元素在水平、竖直方向上实现居中对齐。

需要注意的是，背景图片的大小应该设置为cover，这样可以避免出现拉伸的情况。

使用这种方法，图片热区可以根据屏幕大小自适应，提高了网站的用户体验。