html - 背景图像和图标未在背景图像上对齐的问题

Question

这就是我想要做的 http://uupload.ir/files/lue6_web_1920_2.png这就是我到目前为止得到的(因为图片太大，我只上传了一半) http://uupload.ir/files/ldto_capture.png 我的第一个问题是在我的 react 组件中我不知道如何在背景图像上设置这些图标 第二个是页面没有响应我的这段代码，我不能在购物车和用户个人资料图标之间留出间距 最后，一切似乎都不对劲。

import React from "react";
import './Home.css';
import Cover from '../Designs/adult-beautiful-beauty-413727.svg';
import User from '../Designs/user.svg';
import Cart from '../Designs/shopping-cart-black-shape.svg';
const Home = () => {
    return (
        <div>
            <div>
                <img src={Cover} alt="cover" className="cover" />
            </div>
            <div className="nav">
                <img src={User} alt="cover" className="user" />
                <img src={Cart} alt="cover" className="cart" />
                <hr />
            </div>
        </div>
    );
};
export default Home;

CSS

.cover{
    position: absolute;
    width: 100%;
    z-index: -1;
}
.nav{
    display: grid;
    grid-column-gap: 100px;
    float: right;
    border:1px solid red;
}

Answer 1

• 在背景图像上设置图标，您可以在父级上使用 position relative; 和 position: absolute;顶部:0； right: 0; 在导航上。这会使您的导航转到右上角。
• 通过设置 padding
可以轻松地在导航项之间留出空间
• 在进行响应式设计时，请查看 CSS Media Queries

.container{
 position: relative;
 width: 100%;
 height: 100%;
}

.cover{
 position: relative;
 width: 100%;
 height: 100%;
}

.nav{
 position: absolute;
 top: 0;
 right: 0;
}

.user{
  padding: 0 20px;
}

.cart{
 padding: 0 20px;
}

<div class="container">
  <div>
    <img src="https://dummyimage.com/500x500" class="cover" />
  </div>
  <div class="nav">
    <img src="https://dummyimage.com/50x50/ddff00" class="user" />
    <img src="https://dummyimage.com/50x50/ddff00" clas="cart" />
  </div>
</div>