如屏幕截图所示,我想在“视图”上显示个人资料图像,该图像隐藏在视图后面。我正在使用React-native实现它。
顶部的红色视图,其中添加了个人资料图像。在其下添加带有阴影的另一个视图。
HTML代码
<Content style={styles.content}>
<View style={styles.topView} transparent>
<View style={styles.profileImageView}>
<Image
style={styles.profileImage}
source={require("../Images/avatar.png")}
/>
</View>
</View>
<View style={styles.middleView} transparent>
<View />
<View />
</View>
</Content>
CSS代码
content: {
flex: 1,
backgroundColor: "#f5f6f8"
},
topView: {
marginTop: 30,
marginLeft: 15,
width: "100%",
height: 40,
backgroundColor: "red"
},
profileImageView: {
width: 100,
height: 100,
marginLeft: 30,
borderRadius: 5,
backgroundColor: "yellow",
position: "absolute"
},
profileImage: {
width: "100%",
height: "100%",
position: "absolute"
// marginLeft: 45,
// marginTop: 30,
// borderRadius: 5
},
middleView: {
width: 360,
height: 346,
marginTop: 14,
marginLeft: 15,
borderRadius: 10,
backgroundColor: "#ffffff",
shadowColor: "#B8B8B8",
shadowOffset: {
width: 0,
height: 10
},
shadowRadius: 20,
shadowOpacity: 1
}
我已经尝试过位置:“绝对”和覆盖:“隐藏”。但是,对我没有任何作用。
希望有更好的解决方案。
提前致谢。
最佳答案
请使用z-index属性来实现上述结构。
注意:我已包含引导程序以具有导航栏结构。您可能会完全淘汰它,并在代码中使用提到的CSS。
img {
margin-bottom: -120px;
z-index: 1;
position: relative;
}
.text {
border: solid 1px red;
min-height: 200px;
z-index: 2;
background-color: pink;
position: relative;
width: 100%;
margin-top: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqrfVof7CYYRtsdCu1VD4AWoPB2gs25PP5hQAuhOwhZngrOhsS" alt="brand"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</nav>
<div class="text">
</div>
关于html - 查看个人资料图片,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51893302/