先来看看需求，如下图 卡片布局悬浮在背景层上方，上方+两侧漏出背景图
image.png
研究了一下有三种方案，全部复制到html，即可预览
这是实现效果
image.png
需要用到两张图片，可自行下载
bg.png
ic_touxiang.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.head,.head2 {
position: relative;
width: 100%;
height: 240px;
/* text-align: center; */
z-index: 2;
background-color: #f8f8f8;
box-sizing: border-box;
padding-top: 1px;
}
.card{
margin: 66px 25px 25px 25px;
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
}
img {
width: 50px;
height: 50px;
}
.user_name {
font-size: 16px;
font-weight: 600;
color: #000000;
margin-top: 10px;
}
.user_number {
font-size: 16px;
margin-top: 10px;
color: #000000;
}
.head:after {
width: 100%;
height: 120px;
position: absolute;
left: 0;
top: 0;
z-index: -1;
content: '';
/* border-radius: 0 0 50% 50%; */
background: #fd6954;
}
.bgImg{
width: 100%;
height: 120px;
background: #fd6954;
}
.card2{
position: absolute;
top: 60px;
left: 25px;
/* 定位脱离了父元素宽度限制，如果想继续铺满，需要减掉两侧定位的距离之和 */
width: calc(100% - 50px);
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
}
.head3{
width: 100%;
height: 240px;
padding: 1px;
background: url("bg.png") no-repeat;
background-size:100% 50%;
box-sizing: border-box;
}
.card3{
margin: 60px 20px 20px 20px;
background-color: gainsboro;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
第一种方式 伪元素来做背景-比较灵活，伪元素可以任意修改大小，及位置
<div class="head">
<div class="card">
<img src="./ic_touxiang.png" alt="">
<div class="user_name">用户昵称</div>
<div class="user_number">181****7086</div>
</div>
</div>
<br>
第二种 背景图用img标签来做，卡片定位，在图片上层--子元素定位，宽高需要计算
<div class="head2">
<div class="bgImg"></div>
<div class="card2">
<img src="./ic_touxiang.png" alt="">
<div class="user_name">用户昵称</div>
<div class="user_number">181****7086</div>
</div>
</div>
第三种方式 最外层div设置背景图，直接铺满div-调节子元素到对应位置--这种背景图需要设计得非常好,不推荐，除非有设计图
目前是利用图片铺满高度一半
<!-- background-size:100%; -->
<div class="head3">
<div class="card3">
<img src="./ic_touxiang.png" alt="">
<div class="user_name">用户昵称</div>
<div class="user_number">181****7086</div>
</div>
</div>
</body>
</html>
网友评论