我在將按鈕重疊在另一個按鈕上時遇到問題。我想按照我在下面附上的圖片
Codesandbox
更新
將影像移動為背景影像并調整位置。
const MainButton = styled.button`
border-radius: 50%;
border: 2px solid red;
position: relative;
background-color: #fff;
background-image: ${({ src }) => `url(${src});`}
background-position: center center;
background-size: contain;
display: block;
width: 40px;
height: 40px;
position: relative;
margin-bottom: 0.5rem;
cursor: pointer;
& > img {
width: 100%;
height: 100%;
object-fit: contain;
}
`;
const IconButton = styled.div`
background-color: #fff;
border-radius: 50%;
border: 2px solid red;
cursor: pointer;
position: absolute;
display: block;
width: 22px;
height: 22px;
line-height: 22px;
position: relative;
margin-bottom: 0.5rem;
overflow: hidden;
text-align: center;
user-select: none;
left: 50%;
top: 100%;
transform: translate(-50%, -50%);
& > img {
width: 100%;
height: 100%;
object-fit: contain;
}
`;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416932.html
標籤：
上一篇：如何使我的文本適合輸入的大小？