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

在背景图像上设置图标，您可以在父级上使用top-bar js-top-bar top-bar__network _fixed，在导航上使用position relative;。这使您的导航转到右上角。
通过设置position: absolute; top: 0; right: 0;
进行自适应设计时，请注意CSS Media Queries

padding

.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;
}

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

1 个答案: