我目前正在学习 React,所以我正在构建一个简单的搜索网站。您可以在其中使用 TVMaze API 搜索电视节目。
我试图将一个 img 与下面的 div 重叠以产生这种效果: 目前我只有这个:
现在我的问题是如何让图片重叠?我“知道”我应该使用 z-index 使一个超过另一个,但我不确定如何将 img 移动到底层 div 上。
这是我在我的 React 组件中的 render() 中返回的:
return (
<div>
{show.image !== null && (
<div className="result-container">
<img className="result-poster" src={show.image.medium} alt="" />
<div className="result-card">
<h2 className="result-title">{show.name}</h2>
<div className="result-ratings">
<i className="material-icons">star_border</i>
<h3 className="result-rating">
{show.rating.average === null && "N/A"}
{show.rating.average !== null && show.rating.average}
</h3>
</div>
</div>
</div>
)}
</div>
);
以及对应的scss:
.result-container {
width: 300px;
margin: 2rem;
display: flex;
flex-direction: row;
justify-content: space-around;
text-align: center;
.result-poster {
width: 100px;
height: 100px;
z-index: 2;
border-radius: 50%;
background-size: cover;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.result-card {
width: 200px;
z-index: 1;
height: 50px;
padding-top: 1rem;
background: #eee;
border-radius: 2px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
.result-ratings {
display: flex;
justify-content: space-around;
align-content: center;
}
i,
h3,
h2 {
margin: 0;
font-size: 1rem;
}
}
它看起来也像 img 中的图片以某种方式扭曲,我也不知道如何“撤消”。
非常感谢您的帮助,因为我对这种开发还很陌生。
最佳答案
这是 css,如果您需要更多帮助,请告诉我。
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.result-container {
width: 300px;
margin: 2rem;
display: flex;
align-items: center;
.result-poster {
width: 100px;
height: 100px;
z-index: 2;
border-radius: 50%;
background-size: cover;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.result-card {
width: 200px;
z-index: 1;
height: 80px;
padding-top: 1rem;
padding-left: 60px;
padding-right: 20px;
margin-left: -50px;
background: #eee;
border-radius: 2px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
display: flex;
justify-content: flex-end;
.result-ratings {
display: flex;
justify-content: space-around;
align-content: center;
}
i,
h3,
h2 {
margin: 0;
font-size: 1rem;
}
}
}
关于css - 定位一个圆形img重叠div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52100023/