怎么把背景照片放在其中的一个盒子里面，什么都试过了？

Question

这是代码试过的所有东西，你怎么把背景照片

import React, { Component } from "react";
import Photo from "./Emoticons/A.jpg";

class Contact extends Component {
  render() {
    return (
      <div className="contact" style={{ width: "1200px" }}>
        <div className="row ml-5">
          {/* Prva */}
          <div className="col-sm mt-5">
            <div
              style={{
                boxSizing: "content-box",
                boxShadow: "-2px -2px 5px #000000",
                height: "400px",
                width: "345px"
              }}
            >
              <h2 style={{ textAlign: "center" }}>Info</h2>
            </div>
          </div>
          {/* Druga */}
          <div className="col-sm mt-5">
            <div
              style={{
                boxSizing: "content-box",
                boxShadow: "-2px -2px 5px #000000",
                height: "400px",
                width: "345px"
              }}
            ></div>
          </div>
          {/* Treca */}
          <div className="col-sm mt-5">
            <div
              style={{
                boxSizing: "content-box",
                boxShadow: "-2px -2px 5px #000000",
                height: "400px",
                width: "345px"
              }}
            ></div>
          </div>
        </div>
      </div>
    );
  }
}

export default Contact;

试过背景：‘照片’，什么都没有。

Answer 1

您只需要使用与CSS属性等效的javascript。例如：

const backgroundPhotoUrl = "..."
<div style={{
  backgroundImage: `url(${backgroundPhotoUrl})`,
  backgroundPosition: "center center",
  backgroundSize: "cover",
}}>
  {...}
</div>