css - 定位一个圆圈img重叠div
问题描述
我现在正在学习 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;
}
}
}
推荐阅读
- c++ - . 链表 , 反向 函数 , 数据 结构 ;
- xml - 当标签的url部分时如何提取Oracle XML
- javascript - ReactJS:错误:超过最大更新深度
- python - 无法使用 Django-cron 进行函数调用
- excel - Excel 创建新工作簿并复制现有工作簿表
- reactjs - 当访问正确的 url 并且用户未登录时,如何使我的 React 组件挂载?
- linux - 共享库符号冲突和静态链接(在 Linux 上)
- python - 不明白 x != " " 的用法
- python - 使用 PyInstaller 在 MSYS2/MinGW 中编译 GTK 软件的问题
- javascript - 选择子单选按钮时选择容器,未选中时 div 内的链接除外