css - 反应 js 背景图片

Question

我目前正在制作一个简单的反应图像，其中将包含不同用户的个人资料图片。当我尝试设置背景图像时遇到了问题。我将有两个背景图像，但我无法放置任何背景图像。这些图像在我的 public/images/ 中，但网页中没有显示任何内容。

我在 CSS 文件“App.css”中的 body{} 中添加图像。

应用程序.css

body {
  margin: 0;
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
  background-image: "url(/images/bg-pattern-top.svg)";
  background-size: contain;
  background-position: top;
}

应用程序.js

import './App.css';
import PorfileCard from './PorfileCard';

function App() {
  return (
    <div>
    <PorfileCard/>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

标签： cssreactjs

Answer 1

我能够解决这个问题的唯一方法是在 app.js 的主 div 上使用内联样式。

import './App.css';
import PorfileCard from './PorfileCard';

function App() {
  const mystyle = {
    backgroundImage: "url(/images/bg-pattern-top.svg)",
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat"
    
  }
  return (
    <div style={ mystyle }>
     <PorfileCard/>
    </div>
  );
}

export default App;